Write the Code. Change the World.

6月 28

原来的字体太难看,很喜欢微软雅黑那细腻、圆润、光滑的感觉。所以自己就把博客的字体修改修改成了微软雅黑。

要更改博客字体,首先找到样式表中(Style.css)控制字体的语句:

然后改成你需要的字体即可。

如改成微软雅黑:

其中Microsoft YaHei(微软雅黑)就是第一语言,后面的xxxxxx是备用字体。

嗯,这样是不是好看多了。

Notice:

1.如果浏览者没有安装微软雅黑字体, 即使修改CSS, 对方也看不到效果 。
2.当修改CSS显示为雅黑字体后, 如果对方没有安装字体, 则会自动选择第二字体 。


感谢机智的阿卡林酱提醒,以上是很屎的改法。

于是参考《Web 中文字体应用指南》《如何保证网页的字体在各平台都尽量显示为最高质量的黑体?》改成了这样:

这句声明都做到哪些事情呢?

1.对于英文字符,首先查找Helvetica(Mac),然后查找Tahoma(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);

2.对于中文字体,首先查找华文细黑(Mac),然后查找微软雅黑(Win),然后是宋体(Win),黑体(Mac&Win,用作Mac的fallback);同理,若是以上三者都缺失,则使用当前默认的sans-serif字体。

这样声明的好处有哪些?

1.声明字体名称(英文)和显示名称(中文)。
很多开发者忽略了这一点:尽管我们在操作系统中常常看到宋体、微软雅黑、华文细黑这样的字体名称,但实际上这只是字体的显示名称,而不是字体文件的名称。虽然说在大多数情况下直接使用显示名称也有效,但有些用户却工作在一些很极端的情况下,这会导致你的字体声明无效。
比如说,用户安装了中文版的操作系统(这意味着系统有中文字体),但是却切换到了以英文为主要语言——这种情况在那些希望加强英语锻炼的中文用户当中是很常见的。这时候,操作系统很有可能无法按照显示名称找到正确的字体,所以我们要记住的第一件事情就是: 同时声明中文字体的字体名称(英文)和显示名称(中文)。

2.声明英文字体,并且英文字体应该在中文字体之前。
记住这个事实:绝大部分中文字体里包含英文字母(但是基本上都很丑),而英文字体里不包含中文字符。
在网页里中/英文混排是很常见的,你绝对不会喜欢用中文字体显示英文的效果,所以一定不要忘了先声明英文字体。

3.照顾不同的操作系统。
Windows, Mac OS, Linux 家族等常用操作系统里的系统字体字体渲染效果差异很大。如果没有缺失字体,正常情况下这样声明 Windows 使用Tahoma+微软雅黑,Mac OS 使用Helvetica+华文细黑。而Linux,因为文泉驿微米黑的质量也没有绝对优势,加之 Linux 各发行版的情况非常复杂,所以或许不指定字体最好。

4.向下兼容。
声明了宋体作为微软雅黑的fallback,黑体作为华文细黑的fallback。

PS:

其实最好是判断 UA 然后为不同的平台指定不同的 font-family,但由于技术所限。。。

从 Vista 开始,微软提供了微软雅黑作为新的简体中文默认字体。这款字体跟上了时代,但褒贬不一。微软雅黑有粗体,西文部分达到了 Windows 的水准。在自己的网页设计中要不要用微软雅黑来显示正文——这是一大抉择。我个人感觉微软雅黑比宋体好看多了,所以还是沿用微软雅黑。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

活捉 42 条
  1. 天然呆

    用了po主的font-family: “Avenir Next”, Helvetica, Arial, “Lantinghei SC”, “Microsoft YaHei”, sans-serif 代码修改了style.css中的原始代码,保存后还是原来的字体呀,请问po主我该怎么办啊!

  2. 抖M

    博主网站666,正经宅男风。。我也出现了楼下“找太阳借火”的问题,研究了半天发现博主在之前回帖里给的font-family里面引号是中文的。。修改之后好用了~谢谢博主!

  3. 天然呆

    博主的网站做的真心不错~作为完全不懂代码的小白,想请教一下博主,您的页面加载进度条是通过什么方法实现的?另外,为何我把主题下 style.css 里 font-family 都改为您推荐的格式,为何还是显示宋体呢?电脑已安装微软雅黑等各种字体。烦请不吝赐教,谢谢~~

    1. 一只萌萌哒博主

      进度条:https://github.com/rstacruz/nprogress

      没链接我也看不到呀,还是补下 css 基础吧 = =

  4. Pingback: WordPress主题字体更换 – Jack2code's随笔

  5. Pingback: wordpress修改记录 | Wangmk

  6. 天然呆

    很喜欢你的这个博客,已收藏。博主能不能有没有时间方不方便帮我给一个简单的主题做一点简单的修改?