如何正確編碼UNICODE字體圖標，以便它們在所有瀏覽器上呈現

我想將Unicode圖標添加到網站，並且只有unicode - 沒有自定義字體文件。如何正確編碼UNICODE字體圖標，以便它們在所有瀏覽器上呈現

我知道我可以這樣做：

[class^=icon-facebook]:before { 
    content: "\00066"; 
} 
[class^=icon-twitter]:before { 
    content: "\01F426"; 
} 
[class^=icon-phone]:before { 
    content: "\01F4DE"; 
} 
[class^=icon-fax]:before { 
    content: "\01F4E0"; 
} 
[class^=icon-email]:before { 
    content: "\01F4E7"; 
} 
[class^=icon-link]:before { 
    content: "\01F517"; 
} 
[class^=icon-pay]:before { 
    content: "\01F4B8"; 
} 
[class^=icon-dollar]:before { 
    content: "\01F4B5"; 
} 
[class^=icon-yen]:before { 
    content: "\01F4B4"; 
} 
[class^=icon-save]:before { 
    content: "\01F4B0"; 
}

jsFiddle

但是，我讀了一些瀏覽器將不渲染「圖標」（Unicode字符）正確。有時候瀏覽器會顯示一個空的方塊而不是Unicode字符。

如何編碼我的CSS以防止發生這種情況？

沒有自定義字體
沒有影像

來源

2015-05-05 Omar

使用圖像而不是unicode字符...？ –

看看這個問題：http://stackoverflow.com/questions/22380974/fallback-for-using-unicode-with-css –

你想防止廣場出現？即使瀏覽器不支持你選擇的角色？ –

但是，我讀了一些瀏覽器將不渲染「圖標」（Unicode字符）正確。有時瀏覽器會顯示一個空的方塊而不是Unicode字符。

如何編碼我的CSS以防止發生這種情況？

我不確定您是否意味着要防止渲染空白正方形，或者希望所有瀏覽器的字體都相同。

如果你的意思是你想要的字體對於所有瀏覽器相同的，並且不希望包括任何字體文件或圖像文件，所有你能做的就是選擇一個由所有瀏覽器和測試，如果不支持的字體他們顯示正確。

這裏是一個工具，你可以嘗試在一切可能的瀏覽器中測試你的圖標： https://spoon.net/browsers

或者，如果你只是想和萬一不是你要處理的錯誤認識，如果字符顯示正確換句話說，這是一種你可能會覺得有用的方法。 https://stackoverflow.com/a/1912045/1273587

來源

2015-05-13 08:37:23 cytsunny

-1

直到今天，沒有單一的網絡瀏覽器被建成，它將符合所有的標準，並滿足我們所有的技術和設計要求。

每個瀏覽器都有自己的功能和限制。這就是爲什麼，我們的開發人員試圖理解這些限制，並提出備用解決方案，以便我們的應用程序在所有瀏覽器和所有版本中儘可能無縫和儘可能完美地工作。編寫跨瀏覽器兼容代碼是一項技能/藝術。

當所有瀏覽器得到標準化並遵循相同規則的那一天，那麼web開發人員（特別是HTML CSS開發人員）的生活將非常簡單，並且可能沒有太多的工作/挑戰！ ;-)

你試圖實現的是非常樂觀的解決方案，但實際上它是不可能的。這是很難的事實，但你必須消化它，應該專注於其他方式，如何用可用的替代解決方案實現你的目標（你已經知道）

來源

2015-05-13 11:36:58

我明白，你不想做一個「額外」字體下載或圖像下載。如果你堅持保留其所有的CSS，你可以嘗試的Base64例如：

<style type="text/css"> 
div.image { 
    width:   14px; 
    height:   14px; 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGMjdBMjVGOTU2NTAxMUUyOUFBN0EzOUYwOEVBMkQ1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGMjdBMjVGQTU2NTAxMUUyOUFBN0EzOUYwOEVBMkQ1MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkYyN0EyNUY3NTY1MDExRTI5QUE3QTM5RjA4RUEyRDUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkYyN0EyNUY4NTY1MDExRTI5QUE3QTM5RjA4RUEyRDUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+AND5IAAAAHBJREFUeNpi/P//P4OJiQkDGmAG4r9AzATl/4Oy/zHgAWfOnIFrOAjE/5HwHyj9F4r/I9G48CEGJBdQA4AMZWCBcuypZSo1XUhbAw8SCHBi8EFkA/9TwXH/kCPFYeRFygEqRMoBmuQURlDhQE0AEGAA1LJE38CAHLYAAAAASUVORK5CYII='); 
} 
</style>

這將會把漢堡包菜單圖標。這是一個工作示例：Demo

它肯定會在所有瀏覽器中看起來完全一樣，因爲它是圖像而不是字體。

，你可以做任何png圖片到這個位置： PNG to Base64

祝你好運:)

來源

2015-05-14 10:32:26 Mike

如果瀏覽器支持Unicode的話，那將支持所有的字符代碼。但並非所有字體都會爲所有Unicode字符設置字符字形。

因此，要獲得對所需字符的支持，您需要使用具有這些字符的字體（對於您的情況，網頁安全的字體），格式爲所有不同操作系統使用的格式。

來源

2015-05-14 19:53:04 crc442

如何正確編碼UNICODE字體圖標，以便它們在所有瀏覽器上呈現

回答

相關問題