(方法在分割线后面,前面叙事)
今天用了很久电脑,突然就觉得看着Windows下Chrome的字体觉得很不舒服,跟Mac下的差太远了,于是就开始折腾怎么设置浏览器字体。
先讲一下流程,我的操作方案是:下载自己喜欢的字体,安装
用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。我在测试页面试了一下,发现可以了。
经过一系列探索,我发现两个方法可以获取到字体的”英文名”。找别人整理的对照表。。。?我搜了一下好像张鑫旭专家的博客有一份。
用这两个软件:FontCreator, FontLab(都有试用版)。
打开字体后:FontCreator:
Font-Properties,如果Extended那栏Typoxxxxxx有值的话,就是这个,没有的话。就是Identification - Font-Family这栏的value。Font Lab:
File-File Info,那个Family name就是。
完。
PS:我在折腾的时候去方正买了2个正版字体,3块/套,正版的好像没这个问题。可能网上流传的这些有些描述信息是被修改过的?