获取中文字体的英文名字

(方法在分割线后面,前面叙事)

今天用了很久电脑,突然就觉得看着Windows下Chrome的字体觉得很不舒服,跟Mac下的差太远了,于是就开始折腾怎么设置浏览器字体。

先讲一下流程,我的操作方案是:

  1. 下载自己喜欢的字体,安装

用Chrome的stylish扩展,写一个非常简单的全局CSS属性。

* {font-family : Verdana, Hiragino Sans GB !important}

关于字体的基础知识,去w3school,搜一下font,看前3个搜索结果就够了。

关于字体是怎么匹配的,看两位专家的回答,第二个讲得比较详细:

「font-family: tahoma, arial, 宋体, sans-serif」是什么意思?www.zhihu.com图标

在这个过程中我遇到了两个棘手的问题:

  • 我下载了一个字体,比如,”方正黄草简体.ttf然后打开字体之后是会看到一个”字体名称”的东西,把那个字体名称写到font-family就行了,大家都是这样理解的吧。

我用python开了一个简单的web server来测试,结果刷新死活都不出来新安装的字体,重新下载了好几个安装再刷新都是这样。有一次,试某个字体的时候,我打开Firefox,突然就能显示了,我想着是不是浏览器的原因。结果我又换了个字体,Firefox也是没办法显示出来。兜兜转转,兜兜转转,搞来搞去(省略两百字)……最后发现原来重新装了字体的话,浏览器要重启一次才行。。T_T

而且要注意,Chrome选择元素看字体是在computed那里看rendered font,但Firefox就不是了,有一个独立的Font Tag,结果我盯着Computed看了好久。。T_T

  • 第二个问题就是跟主题相关的了,我想试一下苹果上才自带的冬青黑字体,于是度娘下载了一个。文件名和”字体名称”是这样的:

那我当然就这样写啦:

* {font-family : "冬青黑体简体中文 W3" !important}

结果重启浏览器一点反应没有,测试页面直接fallback到了Chrome浏览器设置的字体(就是设置-字体,这个地方设置的)。

然后我又试了这个字体在Windows字体面板那里显示的字体名字:

* {font-family : Hiragino Sans GB W3 !important}

依然不行,真是神奇了。这个时候我上了一个网站,发现字体好像变了,好像是冬青黑,我看了一下,原来这个网站用的font-family是"Hiragino Sans GB",没有后面的W3。我在测试页面试了一下,发现可以了。


经过一系列探索,我发现两个方法可以获取到字体的”英文名”。

  1. 找别人整理的对照表。。。?我搜了一下好像张鑫旭专家的博客有一份。
  2. 用这两个软件:FontCreator, FontLab(都有试用版)。

打开字体后:

    • FontCreator:

Font-Properties,如果Extended那栏Typoxxxxxx有值的话,就是这个,没有的话。就是Identification - Font-Family这栏的value。

  • Font Lab:


File-File Info,那个Family name就是。

完。


PS:我在折腾的时候去方正买了2个正版字体,3块/套,正版的好像没这个问题。可能网上流传的这些有些描述信息是被修改过的?

发布于 2018-05-17