@font-face 生成

在线生成网页字体 CSS:上传 WOFF2、WOFF、TTF 或 OTF,得到带 font-display 的 @font-face。默认是 url();字体转 Base64 只作为较小子集文件的选项。

名称、字重和可选的 Base64 均在浏览器本地计算,文件不会上传。
1选择字体文件
拖入字体,或 点击选择 支持 .ttf / .otf / .woff / .woff2。一次一个文件。
2@font-face
url()
 
更多选项

生成的 @font-face 用 url 还是 Base64?

@font-face 的 src 指向字体文件时,浏览器可以单独缓存该文件。format() 按实际上传格式填写:WOFF2、WOFF、TrueType(truetype)或 OpenType/CFF(opentype)。网页上若需要更小体积,先用 字体格式转换 得到 WOFF2,再把路径填进 url。

font-display: swap 表示自定义字体尚未可用时先用后备字体绘制,加载完成后再替换。字重取自 OS/2 表的 usWeightClass(若存在),否则按子族名估计;样式按 OS/2 的 italic 位或子族名中的 Italic / Oblique。

完整中文字体能转成 Base64 吗?

Base64 把字体写进样式表,长度约为二进制的 4/3。不超过 300KB 的文件可以直接生成。更大的文件会先显示转换后的体积,确认后仍会生成。完整中文字体嵌入后,样式表通常为数 MB 到数十 MB,浏览器生成和复制都会变慢。

微信小程序主包有体积上限,网络字体还有域名与格式限制。需要自定义字体时,应先做 子集化,再引用较小的 WOFF2,而不是把整包字体转成 data URI。

什么时候写入 unicode-range?

仅当字体里带 Unicode 的字形不超过 2000 个、合并后的区间不超过 120 段时提供该选项。完整字库的区间列表会很长,对未子集化的文件没有实际帮助。该范围来自 cmap 上的码位,不包含仅靠 OpenType 替换才能显示的字形。

小程序能直接用这段 CSS 吗?

本页输出的是 CSS @font-face。微信小程序动态字体使用 wx.loadFontFace,source 可以是 https 地址或 Data URL,不是把这段 CSS 原样贴进样式。完整中文字体仍应先做 子集化。官方建议优先 TTF 和 WOFF,低版本 iOS 对 WOFF2 可能不兼容。

字体会上传吗?

不会。family 名、字重、unicode-range 和 Base64 都由浏览器从本地文件计算。

评论

评论会保存到服务端,用来帮我们听取用户意见,更好的改进这个工具。计算和文件仍在浏览器本地完成。不要粘贴日志、SQL、DBC、密钥或密码。