0
我在通過Base64編碼的FontAwesome字體文件獲取任何瀏覽器中的unicode字符時遇到問題。普通的ASCII字符顯示就好了,我可以在Chrome中看到的字體被成功地從Base64編碼裝在我的.css:Base64'ed Unicode字體圖標無法渲染
當添加一個:之前和匹配Unicode字符,字體的字符未被發現。 F083應該在字體真棒相機圖標 - http://fontawesome.io/icon/camera-retro/
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css"></link>
</head>
<body>
<div>Hello!</div>
</body>
</html>
CSS:
@font-face {
font-family: "TestF";
src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAANQAA8AAAAACDAAAALyAAQBywAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACDAggEEQgKaIEMATYCJAMwCxoABCAFhnwHUT93ZWJmBhswB8iemjwJAIDFeo93cpFA5bbi4fl1fOe+mSUZZSQpFABZrmBIavsTN9Y0f60lIXO+xAoA7UOewVZp2uSMnZwS639v9PHNI+VZ6+ePmS4oEnxvgQOdUv3lW4c1RTSOBjjc7g4oskkO9A4ED+iGsYvLuBwCPk1cBXwcT3f4KS+f/RaojLpAEkIlIWeuQ1bmQJxWRp4fz3sBB92NTZtBHKXdasNO14O+TJuiskpRVpiDBhY2xyAzzY3z03ukRPwr0hYAteWl5Kpo7ttdj73xrUXLNkWlyJHz9YOlBWaOu5Ohav9RbcR2LRplZbsjrbYD/QFBBvxXZctULJcrXwF4yaB8PUaUUg1UBvWBLEby1k6OrvtDkC1yTbZShSrlF1WpUDn2GHTzx80GLum9pCva70HoNvhhudy/ng/KlvkVMLIU8JNl0cokHpYrG0Uihvi7GOTxca6FwvnVBheUb1YO93YnpDr5TZSfUyi4a6Tm7FTn3I+rnI4ZBEhTQTyr1Ze5R/xHoHLvuyaEwHALO6mGP5nIK2AeCP2hLksgJFVtgUxLD8i19YQyWvuFsur6h3IuRg7l1Y+rUEHteBKrpGOMD1UNjiLKO07qD+91T+Pgg/Jpn/CjiungB33PNEynjWKxJVwKicyHxlghgmb+RU2CBKqpqGopQQO6Po4t0IvlEg9xWx4lKJmymHwDUX6lxUCOCF80oGO5pna2ztYGhnrYcJaTE3d7CY+oZw/TkMXrqEGPUvO7qKGkraQy7z56EezpyEKyArqYRj7LRjm35z6p6kd5/ohhkdWKILM4miqV6WIJSJZmuTSIft6ighP0QDVVMeRnSPYQXdxF7nlKKPdnsJGhrGvHnmTbYGmUIdUKl+kzQXO1y8tuCLcyrO4yTtdhQElVosrBipRs6Knq8z2Ns6ht0xBir4ysW3s6W6ETR0DhnoYC9vETtWnvU5lIkcmcdMxRJ5x2xvHIyy5fk9hytdzWdUoFGEe7m9T6jB0FzIyz+TUAAAA=) format('woff2'),
url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVAAA8AAAAACDAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcdGSyhUdERUYAAAF0AAAAHAAAAB4AJwAST1MvMgAAAZAAAAA+AAAAYIgiqlNjbWFwAAAB0AAAAHIAAAGCNQc5m2N2dCAAAAJEAAAABAAAAAQAOwRvZ2FzcAAAAkgAAAAIAAAACAAAABBnbHlmAAACUAAAAGQAAABoAVseSmhlYWQAAAK0AAAANAAAADYBXUeMaGhlYQAAAugAAAAdAAAAJAgXBg1obXR4AAADCAAAAB4AAAAwOZQAO2xvY2EAAAMoAAAADgAAABoBEAEIbWF4cAAAAzgAAAAfAAAAIABQADluYW1lAAADWAAAAaQAAAN8MXCEJXBvc3QAAAT8AAAAOgAAAFH6qspYd2ViZgAABTgAAAAGAAAABhBtWJ4AAAABAAAAANRRtWoAAAAAy088MAAAAADUw8DqeNpjYGRgYOABYjEgZmJgBEJuIGYB8xgABBcAOnjaY2BmbWCcwMDKwMLSw2LMwMDQBqGZihkYGLsY8ICCyqJiBgcGXtU/bAz/gXw2BkaQMCOSEgUGRgDcAwihAAB42mNgYGBmgGAZBkYGEKgB8hjBfBaGBCAtwiAAFGFh4GVQYFjJsI5hC8MxhhuKSqp//v8HyoJEV6CK/v/6//H/mP8R/4P/O/03vPfiFj/UZAzAyMYAl2JkAhJM6AogThsMgI2Vi52FgYOT2uYCAPPVHPsAAAA7BG8AAQAB//8AD3jaY2BisGZgYBJlWcXAzMDOoLeRkUHfZhM7C8Nbo41srHdsNjEzAZkMG5lBwqwg4U3sbIx/bDYxgsSNBRUFVRUFFa0Zb/1LZEz5N4dl1e8waxYTBgYGRgYYYGZgsGQGAL0eFrd42mNgZGBgYGE8nRuk8zue3+Yrgzw7Awic9rcxANFXDh94BaKZRFlWASkOBiYQDwA4cgoTeNpjYGRgYGP4z8DAwM4AAkyiDIwMqIAHACFzATIAAAB42mPqZrBmAAKmUAYGxgMMDOwMuDHjFwYGAFLPAwcAAHjaY2Bg0MEKTQAY4gIZAAB42mNgZGBg4GHgYGBiAAEQycgAEnNg0AMJAAAFWQCKAHjajVG5SgNRFD0ziZooBAQJYjWIWFhkkWAk2MRlbCSGGNRKyDJZMJtJVGwsLKz9BhE/w1pjZ+dP+AUWnnfnxSQyhTzeu+du5y4PwDw+4IPhDwI443WxgTA1F5sIoa+xD8u409iPVTxpPIUVDDSeZu6XxjN4NPwaB7BoPGscxILxovEc1oxhDyFsGd8avyJsbmr8hpiZ0XiAgHmr8TtmzXsXf/qwZD5gB210cIMu6qiixs4t7KKAKzhE+0QtlOm3sI4Y4thAhDiNBo81ltUTzaF0KFV2mZE22Vv0pnEtvjaalDneKi7JUGCsjUNkkMcBo7aRopanbQ+nyBLnRPNisf7wHEvlHjtS0RYSrJ/kjY317s2UJYNDjp6wqikqwmUxsi1vTTxeu1I5JaJh1QpldyynoisqS5c1yrQ2pd9z2gq09oWvyDlGLC1KpZWkS3ePXWGZ7Nzrp2rC2eEmozzD+oWJvIhU+n9klBtyu2nJxFGc8C2OTReXTdsyi0WpvMoakzfBGnGeFNHoP5LcgcPTkenc2e1fxiNccCd1etSPNH4AjYaKwnjaY2BiwA94GBgYmRiZGZgZ+hi6GboYehkmMExk6GFkYUvPqSzIMGQvzcs0MDBwAdFGpm7OANTnCsAAAAABWJ4QbAAA) format('woff');
font-weight: 400;
font-style: normal;
}
div {
font-family: "TestF" !important;
}
div:before {
content: "\f083";
}
這是發生在兩個Chrome和IE(10)。將字體轉換爲Base64時,是否包含unicode字符? (我一直在使用FontSquirrel編碼器來創建Base64)。
也許你的編碼字體家族是錯誤的,首都和一切? –
如果是這樣,我會假設其他字體不會呈現。我已經嘗試了通過其中包含ASCII字符的其他非標準字體,並且Base64成功呈現了該字體中的'Hello'。 – giraffee
嚴肅的問題:你爲什麼BASE64在這麼多地方使用的字體實際上更有可能是你的用戶將它緩存起來? BASE64使字體佔用多33%的字節,並且通過內聯BASE64字符串,迫使用戶下載所有的字體,而不僅僅是瀏覽器支持的字體。另外,爲什麼你使用字體松鼠的字體已經有網絡上所需的每種格式的CDN託管?這種方法沒有什麼意義... = S –