中文网页显示定制字体一直是个大问题,英文简单,毕竟就几十个字符而已。用@font-face加载字体就好了。例如Bootstrap里
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
中文字体现在的解决办法思路是,把网页用到的文字单独做成字体库,然后用以上方法加载。
一种是有专门的厂商提供这类服务,例如,内地的有字库(http://www.youziku.com/)和台湾的justfont(https://www.justfont.com/)
好处是省事,当然,省事是要给钱的。
如果不嫌麻烦,也可以自己做,方法是利用google的sfntly项目里面的sfnttool将需要的字体重新抽取成一个字体库。具体方法如下
1、下载sfntly项目并编译
项目地址
https://github.com/googlei18n/sfntly/tree/master/java
编译为可执行的jar
将需要的字体拷贝到同一目录,msyh.ttc是系统里拷贝处理的微软雅黑
运行命令
java -jar sfnttool.jar -s '字体测试' msyh.ttc myyh.ttf
这样就生成了一个仅包含四个字的字体。
这个时候,可以上各种字体转换网站,将这个字体转换成其他字体,例如:http://www.font2web.com/,不过一般都有文件大小限制。
如果文件太大,可以用snfttool继续转换,
sfnttool的命令如下,应该是会自动除去重复文字。
Subset [-?|-h|-help] [-b] [-s string] fontfile outfile
Prototype font subsetter
-?,-help print this help information
-s,-string String to subset
-b,-bench Benchmark (run 10000 iterations)
-h,-hints Strip hints
-w,-woff Output WOFF format
-e,-eot Output EOT format
-x,-mtx Enable Microtype Express compression for EOT format
然后,添加css
@font-face {
font-family: 'myyh';
src: url('myyh.eot');
src: url('myyh.woff') format('woff'),
url('myyh.eot?#iefix') format('embedded-opentype'),
url('myyh.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.wnh {
font-family: 'myyh';
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
@font-face {
font-family: 'myyh';
src: url('myyh.eot');
src: url('myyh.woff') format('woff'),
url('myyh.eot?#iefix') format('embedded-opentype'),
url('myyh.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.wnh {
font-family: 'myyh';
}
</style>
</head>
<body>
<h1>字体嵌入测试默认</h1>
<h1 class="wnh">字体嵌入测试修改</h1>
</body>
</html>
最后结果如下
我编译好的snfttool.jar