网站字体使用技巧
网站字体使用技巧

扫描二维码访问该页面

2019-7-17 15:2:0 网站建设 2

在网页上应用字体是一项基本技术,同时也是一门艺术。对于英文字体来说可选择的范围实在是太广泛了,合理的使用它们将会为你的网站增色不少。而真正的挑战在于中文字体,由于中文字体组成的特殊性导致其体积过于庞大,除了操作系统内置的字体之外,我们很难在网站上应用其他的字体。我们之前讲过,设计良好的网页对于业务的影响非常大,网页字体的使用也不例外。

网站字体的使用技巧

字体一直都是让设计师和工程师头疼的问题。如果参与过产品的设计和开发,会发现经常有以下这种情况出现:
1. 对比视觉稿和实现出来的网页,其他地方都很完美,就字体不给力;
2. 在 Mac 上很好看,在 Windows 上丑的要死;
3. iPhone 和 Android 又不同。
为什么会出现这样的情况?真正的幕后黑手是系统。

浏览器使用哪种字体取决于
1. 你的系统安装了哪些字体(原来以为浏览器自己也会带字体,这是错误的)
2. 工程师有没有让用户去下载其他字体

所以网站上到底用什么字体非常关键,涉及到的因素也非常多,主要取决于以下几个方面
1. 你的产品要在哪个系统上运行
2. 你的产品是纯英文还是中文英文甚至还有其他国家语言

网站最常用的到字体

我们先来看看网页设计中文字体的使用
中易宋体:即通常被熟知为宋体、新宋体的字体。是Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。
微软雅黑:Vista之后新引入的字体,打开Cleartype之后显示效果不错,不开Cleartype发虚。
华文细黑:Mac下的默认中文。
Droid Sans和衍生的WenQuanYi Microhei:Andriod中的中文,也是Linux绝大多数发行版本的默认中文,当然也有用WenQuanyi Zenhei的,不过比较少了。

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

如果我们网站是英文网站,应该考虑如下字体
Helvetica: 被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。Win和Mac显示都正常。
Lucida Grande是Mac OS UI的标准字体,属于humanist风格,稍微活泼一点。Mac下的显示要比Win下好。
Verdana: 专门为了屏显而设计的字体,humanist风格,在小字号下仍可以清楚显示,但是字体细节缺失严重,最好别做标题。
Tahoma: 也是humanist风格,字体和Verdana有点像,但是略窄一些,counter略小,曾经是Windows的标准字体,Mac 10.5之后默认也有安装。
Trebuchet MS: 为微软设计的一个humanist风格字体,个人觉得个性太过突出,用得不好会不搭。

永远不要忘记声明英文字体,并且英文字体应该在中文字体之前
记住这个事实:绝大部分中文字体里包含英文字母(但是基本上都很丑),而英文字体里不包含中文字符。
在网页里中/英文混排是很常见的,你绝对不会喜欢用中文字体显示英文的效果,所以一定不要忘了先声明英文字体:
Font-family: Georgia, SimSun, “宋体”
Font-family: Arial, “Microsoft YaHei”, “微软雅黑”

最后别忘了照顾不同的操作系统
作为一个 Web 开发者,我们不仅在网站建设应注意浏览器的兼容性,还要特别关注不同的操作系统,你理应对 Windows, Mac OS, Linux 家族等常用操作系统里的系统字体有足够的了解,特别是中文。在这里,我们假设目标网站要同时给予 windows 用户和 mac 用户最好的字体体验,于是我们可以这样声明:
Font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, sans-serif
这句声明都做到哪些事情呢?让我们一一说明(括号内代表其对应的目标操作系统):
对于英文字符,首先查找Helvetica(Mac),然后查找Tahoma(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);
对于中文字体,我们已经了解其规则了。华文细黑(Mac),微软雅黑(Win)是这两个平台的默认中文字体。

网站常用字体

« 上一篇:

企业品牌展示型网站

下一篇 »:

网络营销基础入门

留言列表

ziti  2019/8/14 10:22:05 回复该留言
font: "Helvetica Neue",Helvetica,Tahoma,Arial,STXihei,"华文细黑","Microsoft Yahei","微软雅黑',"Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;

对于英文字符:
优先使用Helvetica Neue这款字体以保证最新版本Mac用户的最佳体验
如果是旧版Mac,则选择系统首选的Helvetica字体
windows系统使用Tahoma字体,其次是Arial字体

对于中文字符:
Mac系统首选华文细黑,windonws系统首选微软雅黑
然后选择了冬青黑体-简作为Mac上的替代方案
使用文泉驿微米黑兼顾了Linux系统

若是以上都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定)
网站字体  2019/9/17 13:50:42 回复该留言
Helvetica Neue字体是CNN网站使用的字体,非常适合英文站。

发表留言

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。