Значки шрифтов Unicode Base64 не отображаются

У меня проблема с получением символов Unicode для рендеринга в любом браузере с помощью файла шрифтов FontAwesome с кодировкой Base64. Обычные символы ASCII отображение просто отлично, и я могу видеть в Chrome шрифт успешно загружен из Base64 в моем .css:Значки шрифтов Unicode Base64 не отображаются

При добавлении: до и совпадающего юникода характера, характер шрифта является не найден. 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). Нужно ли вводить символы Unicode при включении шрифта в Base64? (Я использую кодировщик FontSquirrel для создания Base64).

источник

2017-02-10 giraffee

Возможно, ваша закодированная семья шрифтов ошибочна, капиталы и все такое? –

Если бы это было так, я бы предположил, что другие шрифты не будут отображаться. Я пробовал использовать другие нестандартные шрифты, содержащие символы ASCII, и Base64 успешно отображает мой «Hello» в этом шрифте. – giraffee

Серьезный вопрос: почему вы BASE64'ing шрифт, который используется во многих местах, на самом деле, скорее всего, ваши пользователи кэшируют его, а не? BASE64 заставляет шрифт занимать на 33% больше байтов, а вы заставляете пользователей загружать все из них, а не только те, которые поддерживаются их браузером, встраивая строку BASE64. Кроме того, почему вы используете шрифт squirrel для шрифта, который уже имеет CDN-хостинг в каждом формате, необходимом в Интернете? Ничто в этом подходе не имеет смысла ... = S –

Потратив целый день, я понял, что я глуп ...

Убедитесь, что ваши данные: приложение/Font- [] на самом деле типа файла соответствует файл, преобразованный в Base64. FontSquirrel принимает только ttfs, поэтому, конечно, он не будет работать с ttf закодированной строкой в виде woff.

источник

2017-02-10 21:36:38 giraffee

Значки шрифтов Unicode Base64 не отображаются

ответ

Смежные вопросы