中文网页显示定制字体

最新推荐文章于 2024-05-25 07:25:25 发布

生活在他方

最新推荐文章于 2024-05-25 07:25:25 发布

阅读量1.4k

点赞数

分类专栏：前台开发资料文章标签：网页中文显示字体

本文链接：https://blog.csdn.net/wuyt2008/article/details/53019756

版权

前台开发资料专栏收录该内容

29 篇文章 0 订阅

订阅专栏

中文网页显示定制字体一直是个大问题，英文简单，毕竟就几十个字符而已。用@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

http://download.csdn.net/detail/wuyt2008/9671871

生活在他方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
中文网页显示定制字体

中文网页显示定制字体一直是个大问题，英文简单，毕竟就几十个字符而已。用@font-face加载字体就好了。例如Bootstrap里@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/gl
复制链接

扫一扫

专栏目录