html - Base64'ed Unicode 字体图标未呈现

标签 html css fonts base64 font-face

我在通过 Base64 编码的 FontAwesome 字体文件在任何浏览器中呈现 unicode 字符时遇到问题。正常的 ascii 字符显示得很好,我可以在 Chrome 中看到字体已从我的 .css 中的 Base64 成功加载:

enter image description here

添加 :before 和匹配的 unicode 字符时,找不到字体的字符。 f083 应该是 font awesome 中的相机图标 - 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";
}

enter image description here

这在 Chrome 和 IE (10) 上都会发生。将字体转换为 Base64 时是否不包含 unicode 字符? (我一直在使用 FontSquirrel 编码器来创建 Base64)。

最佳答案

浪费了一整天,我发现我很笨......

确保您的 data:application/font-[filetype] 实际上与您转换为 Base64 的文件匹配。 FontSquirrel 只接受 ttfs,所以当然不能将 ttf 编码的字符串作为 woff。

关于html - Base64'ed Unicode 字体图标未呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42167509/

相关文章:

javascript - 在滚动条上显示 float 导航栏

javascript - 如何在滚动网站上创建强制滚动到 anchor

.net - 从字体中提取几何图形

java - 从 Java 中的 TTF 文件加载一些 TrueType 字体导致 FontFormatException : Font name not found

javascript - 尝试创建一个 jQuery 插件来动态填充 Foundation 模态中的图像

javascript - Android 键盘在表单提交后不隐藏

html - 列之间的引导面板空间

javascript - 调用主进程的函数

javascript - 相对链接和backbone.js路由器

python - 尝试使用 Matplotlib 设置绘图字体时出错