Html Base64'；未渲染的Unicode字体图标
我在通过Base64编码字体文件在任何浏览器中呈现unicode字符时遇到问题。正常的ascii字符显示得很好，我可以在Chrome中看到字体已从my.css中的Base64成功加载： 添加：before和匹配的unicode字符时，找不到字体的字符。f083应该是字体为awesome- HTML:Html Base64'；未渲染的Unicode字体图标,html,css,fonts,base64,font-face,Html,Css,Fonts,Base64,Font Face,我在通过Base64编码字体文件在任何浏览器中呈现unicode字符时遇到问题。正常的ascii字符显示得很好，我可以在Chrome中看到字体已从my.css中的Base64成功加载： 添加：before和匹配的unicode字符时，找不到字体的字符。f083应该是字体为awesome- HTML: 这发生在Chrome和IE（10）上。将字体转换为Base64时是否不包括unicode字符？（我一直在使用FontSquirrel编码器创建Base64）。浪费了一整天之后，我发现我很愚蠢 确
这发生在Chrome和IE（10）上。将字体转换为Base64时是否不包括unicode字符？（我一直在使用FontSquirrel编码器创建Base64）。浪费了一整天之后，我发现我很愚蠢
确保您的数据：application/font-[filetype]与转换为Base64的文件实际匹配。FontSquirrel只接收ttf，所以当然，将ttf编码的字符串作为woff接收是不起作用的。也许您的编码字体系列是错误的，大写字母和所有内容？如果是这样，我会假设其他字体不会呈现。我试过通过它运行其他包含ASCII字符的非标准字体，Base64成功地在该字体中呈现了我的“Hello”。严肃的问题：为什么Base64使用的字体在这么多地方使用，实际上你的用户更可能缓存了它？BASE64使字体占用的字节数增加了33%，并且通过内联BASE64字符串，您迫使用户下载所有的字节，而不仅仅是浏览器支持的字节。另外，为什么您要使用FontSquirrel作为一种字体，而这种字体已经拥有CDN托管，可以满足web上各种格式的需要？这种方法毫无意义=陷入CORS问题，我们对目标服务器没有控制权，在发送头之前也没有更改头的控制权。我们也不能保证使用CDN托管的internet访问（可能只有intranet）。相信我。。。几天来，我们一直试图摆脱这一困境，但运气不佳。这听起来很像XY的问题。例如，如果您在自己的服务器上使用put字体，就没有理由运行CORS（因为这是一个正常的请求）。BASE64最大的问题是，这会成为一个巨大的阻塞资源负载：在浏览器看到任何CSS规则之前，您的CSS文件需要传输并解析两种字体（两种字体在bytesize中都增大了1/3），而不仅仅是一种字体。因此，我强烈建议您提出一个关于CORS问题的新问题，具体到加载字体，并详细说明在本地托管时会发生什么
<html>
<head>
<link rel="stylesheet" href="style.css"></link>
</head>
<body>
<div>Hello!</div>
</body>
</html>
@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";
}