Question

我可以从服务器加载字体。但这不是正确的方法。如何使用base 64加载字体？我用这个我的css文件

          @font-face {<br>
            font-family: 'MyFontFamily';<br>
            src: url(data:font/ttf;charset=utf-8;base64,data_base64);<br>
        }<br>



    .t{<br>
        font-family: "MyFontFamily";<br>
        background-color: red;<br>
    }

这是我的html页面

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <link rel="stylesheet" type="text/css" href="style2.css"> 
    <title>Document</title>
</head>
<body>
    <p class = 't'>test</p>
</body>
</html>`

Answer 1

如果我理解正确，那么您希望在css文件中包含base64编码字体。

为此，您必须遵循以下语法：

@font-face {
font-family: 'MyFontFamily';
src: url(data:application/x-font-woff;charset=utf-8;base64,base64_code_here) format('woff');
}

数据标题和格式根据编码字体而变化。

我在JSFiddle上做了一个例子：https://jsfiddle.net/b7sp45ca/

正如Chris J在评论部分中提到的，如果你的代码中有换行符，那么你将不得不摆脱它们。

（使用的资源：http://sosweetcreative.com/2613/font-face-and-base64-data-uri）

HTML;使用base64加载自定义字体

1 个答案: