Base64で表示されたUnicodeフォントアイコンはレンダリングされません

Base64でエンコードされたFontAwesomeフォントファイルを使用して任意のブラウザでレンダリングするユニコード文字を取得できません。通常のASCII文字がうまく表示され、私は、フォントが正常に私の.css内にBase64からロードされたChromeで見ることができます：Base64で表示されたUnicodeフォントアイコンはレンダリングされません

追加する場合：前に、一致するUnicode文字、フォントの文字があります見つからない。

<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）の両方で発生しているhttp://fontawesome.io/icon/camera-retro/

HTML - f083は素晴らしいフォントでカメラアイコンでなければなりません。フォントをBase64に変換するときにユニコード文字が含まれないのですか？（私は、Base64を作成するためにFontSquirrelエンコーダーを使用しています）。

出典

2017-02-10 giraffee

あなたのエンコードされたフォントファミリが間違っていて、大文字で、すべてですか？ –

これが当てはまる場合、他のフォントはレンダリングされないと思います。 ASCII文字を含む他の非標準フォントを実行しようとしましたが、Base64はそのフォントで「Hello」のレンダリングに成功しました。 – giraffee

本当の質問：なぜあなたは多くの場所で使用されているフォントをBASE64で使っているのですか？ BASE64はフォントを33％多く使用し、ブラウザでサポートされているものだけでなく、BASE64文字列をインライン展開することによって、ユーザーがそれらをすべてダウンロードするようにしています。また、Web上で必要とされるあらゆるフォーマットでCDNホスティングを既に持っているフォントのためにフォントリスを使用しているのはなぜですか？このアプローチについては何も意味がありません。= S –

全体の一日無駄にした後、私は

があなたのデータを確認してください...私は愚かだ考え出し：アプリケーション/ font- [ファイルタイプ]は実際にあなたがBase64でに変換されたファイルと一致します。 FontSquirrelはttfsだけを取り込むので、もちろんttfでエンコードされた文字列を使うことはできません。

出典

2017-02-10 21:36:38 giraffee

Base64で表示されたUnicodeフォントアイコンはレンダリングされません

答えて

関連する問題