font-spider字蛛压缩中文字体包

原创已于 2023-03-14 10:38:51 修改 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2020-01-04 14:35:34 首次发布

代码工具专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在网页中正确应用中文字体，包括从网站下载字体文件，使用@font-face生成器转换字体格式，以及解决Chrome浏览器下字体图标锯齿问题的方法。文章还提供了字体引用的CSS代码示例。

中文字体引用（如思源雅黑）

第一步：网站下载字体： http://www.downcc.com/font/326030.html

第二步：百度 @font-face生成器（字客网 https://www.fontke.com/tool/fontface/ 生成不同格式和字体和样式，页面引用即可）（需要vip了）

202107719更新网站 https://convertio.co/zh/

解决chrome浏览器下@font-face字体图标出现锯齿：

要注意不同格式字体引用顺序问题》 eot>svg>ttf>woff2>woff

复制代码
@font-face {
font-family: ‘SourceHanSansCN-Regular’;
src: url(‘font/SourceHanSansCN-Regular.eot’) format(‘embedded-opentype’), url(‘font/SourceHanSansCN-Regular.svg’) format(‘svg’), url(‘font/SourceHanSansCN-Regular.ttf’) format(‘truetype’), url(‘font/SourceHanSansCN-Regular.woff2’) format(‘woff2’), url(‘font/SourceHanSansCN-Regular.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}

*{font-family:‘SourceHanSansCN-Regular’,Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-text-size-adjust:none; }

字蛛是一个中文字体压缩器
http://font-spider.org/#use

然后再运行： npm install font-spider -g

node.js出错原因：

字体引用时必须用英文单引号
{
@font-face {
font-family:‘SourceHanSansCN-Medium’;
src:url(‘…/font/SourceHanSansCN-Medium.eot’);
src: url(‘…/font/SourceHanSansCN-Medium.eot?#font-spider’) format(‘embedded-opentype’),
url(‘…/font/SourceHanSansCN-Medium.svg’) format(‘svg’),
url(‘…/font/SourceHanSansCN-Medium.ttf’) format(‘truetype’),
url(‘…/font/SourceHanSansCN-Medium.woff2’) format(‘woff2’),
url(‘font/SourceHanSansCN-Medium.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
}
不用引用图标字体;
再运行 font-spider *.html