顯示第一隻信的字形字體（入店的方式）

我有一個字形字體，並希望用它來達到這種效果：顯示第一隻信的字形字體（入店的方式）

Image of a custom twitter icon

到目前爲止我的代碼：

<div class="ico linkedin">linkedin</div> 

.ico {border-radius:10em; background:black; color:white} 
.linkedin {visibility:hidden;} 
.linkedin:first-letter { 
    font-family:'JustVector'; 
    font-size:900%; 
    text-indent:1em; 
    visibility:visible 
}

這在Chrome中有訣竅，但不是在FF或IE（9）中。此外，這是不可訪問的，因爲JAWS不讀取hidden或display:none元素。

所以，我想是這樣的：

.linkedin {position:absolute; left:-5em} 
.linkedin:first-letter {/*etc*/ position:absolute; left:6em}

但它不工作。有沒有合適的方法來實現這一目標？

來源

2013-07-31 Arkana

大多數字體圖標使用：在僞類之前，不是：第一個字母。也許這就是FF和IE上的問題。關於文本，爲什麼不使其不透明：0，並使該div溢出：隱藏？ – Benjamin

'display：none'不是一個元素，它們在技術上是規則的，沒有一個是屬性的。因此_valid_更改。 –

@RyanB對不起，這句話的目的是將這些形式用作形容詞......就像「那個盒子，顯示器：沒有一個」。也許在英文語法中不會這樣工作（用西班牙語）。請自由編輯這個問題，以便更好地理解;）但是請注意JAWS自己讀取內容（而不是css規則或屬性） – Arkana

感謝您的回答，他們向我提出了幾個關於如何處理這個問題的問題。

那麼，最後我會用簡單的一個去。我認爲它是可訪問的，更多的語義，如果頁面中沒有CSS，也可以打印。

我已將第一個字母（圖標）與周圍文本的邊距分開，並且我離開了圖層overflow:hidden;。然後，調整了margin和line-height，以更好地將圓圈內的字符/圖標集中。

最終代碼：

.ico {background:black; border-radius:10em; height:5em; overflow:hidden; position:relative; width:5em; color:white;} 
.linkedin:first-letter {font-family:'JustVector'; font-size:400%; line-height: 1.3em; margin-left:0.2em; margin-right:1em;}

憑藉該解決方案，屏幕閱讀器讀取「LinkedIn」，它只是顯示爲其他用戶給他們足夠的信息的圖標。

來源

2013-08-01 14:58:54 Arkana

我不認爲目前有一種真正可以使用圖標字體的方式。我知道這有點跨度，但這是我的方法。

首先將文本包裝在一個範圍內，以便我們可以隱藏它。並添加另一個跨度圖標

<div class="ico"> 
    <span aria-hidden="true" class="linkedin"></span> 
    <span class="hide">linkedin</span> 
</div>

通知我添加aria-hidden="true"到我的圖標跨度。這是爲了防止屏幕閱讀器讀出字母（用於呈現圖標）。

現在，您可以安全地隱藏文字，以便屏幕閱讀器可以訪問文字，並使用before選擇器應用您的圖標。

.linkedin:before { 
    font-family: 'JustVector'; 
    content: 'l'; 
} 

.hide{ 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
}

來源

2013-07-31 16:37:20

額外的代碼... mmmhhh ...感謝aria標記的信息，它是非常有用，但我認爲這不是很有意義。另外，如果這封信是隨機的，這將是一個非常好的解決方案（在我的情況下，它與單詞的第一個字母L paints linkedin logo匹配，所以不需要生成隨機內容）。 – Arkana

使用圖標的訪問的方法是使用img元件具有足夠alt屬性，例如

<img src=smiley.gif alt="Just joking!">

圖標字體（這可能是「gliph字體」的意思）具有固有的可訪問性問題。使用例如字母和試圖欺騙瀏覽器將它們呈現爲帶有CSS的圖標意味着在CSS關閉的情況下，只有字母，它們是錯誤的信息。使用帶有空白內容和CSS生成內容的元素會遇到同樣的問題，除了CSS（或至少是CSS的可視部分）關閉時，沒有信息而是錯誤的信息。

來源

2013-07-31 16:44:40

如果您使用：before選擇器將字母添加爲內容，則會在停用CSS時停止獲取隨機字母。使用'aria-hidden =「true」'可以防止屏幕閱讀器讀出字母。我也會爭辯說，一個圖標不是內容，不應該用'img'表示。這是一個最好的背景圖片 –

沒有內容不比隨機內容好得多。在少數情況下使用'aria-hidden'可能會有所幫助，但在正常瀏覽時會被忽略。有消息或功能的圖標是內容。一個只用於裝飾的圖標並不是一個真正的圖標，但是如果你想使用它，你可以使用'img'或'alt =「」'或背景圖像;這裏的一個實用標準是：您希望在打印頁面時將其包含在內嗎？（背景圖像通常會在打印時丟失。） –

我瞭解您的前提，但在這種情況下，我更願意避免使用圖像。圖標在不同的地方以不同的尺寸以不同的顏色顯示。它更簡單，頁面更輕，使用我可以隨意更改的文本圖標，此外，它們不會在不同設備上丟失分辨率。這個答案很好，但在這種情況下，我傾向於嘗試使用生成的內容。 – Arkana

顯示第一隻信的字形字體（入店的方式）

回答

相關問題