如何在CSS中嵌入自定义字体且不使用外部文件？

当然可以实现你想要的效果！你说的这种把字体原始数据直接内嵌到CSS里、不用引用外部文件的方式，本质上就是用Data URI scheme，和HTML里<img>标签内嵌图片的逻辑完全一致。

具体实现方法 #

你只需要把字体文件转换成Base64编码，然后替换掉url(...)部分，改用data:协议来指定字体数据即可。

举个实际的例子，假设你的字体是WOFF格式，转换后的Base64编码内容为[你的字体Base64字符串]，那么@font-face的写法就变成：

@font-face {
  font-family: 'myFont';
  src: url(data:font/woff;base64,[你的字体Base64字符串]) format('woff');
  /* 如果需要兼容多格式，可以添加多个src项 */
  /* src: 
    url(data:font/woff2;base64,[woff2的Base64字符串]) format('woff2'),
    url(data:font/woff;base64,[woff的Base64字符串]) format('woff'); */
}

注意事项 #

• 对应正确的MIME类型：不同字体格式要匹配对应的MIME类型，常见的有：
  • WOFF：font/woff
  • WOFF2：font/woff2
  • TrueType：font/ttf
  • OpenType：font/otf
• Base64编码转换：你可以用本地命令行工具（比如Node.js的base64模块）把本地字体文件转换成Base64字符串。
• 性能权衡：内嵌字体能减少HTTP请求，但会增加CSS文件的体积，如果字体文件较大，可能会拖慢CSS的加载速度，建议只对小体积字体使用这种方式，同时可以搭配font-display: swap来优化字体加载时的用户体验。

内容的提问来源于stack exchange，提问作者Oxymoron