网页字体设置你了解吗?

标签: 前端开发 | 发表时间:2014-07-15 15:10 | 作者:破男孩
出处:http://ued.ctrip.com/blog

以前做项目的时候就依葫芦画瓢的设置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等类似的字体,然而当更多的设备和系统出现后,以前这样的设置已不能满足网页在各设备上的显示需求。

就拿最简单的宋体(simsun)来说吧,在Windows系统下显示是一个比较容易阅读的字体,然而在Mac上简直无法直视,如下图给出一个优化前后页面的对比效果:

字体优化前后对比图

因此,出于种种原因,促使我不得不去对字体做一个相应的了解。

对于网站字体设置,本文给出以下意见:

移动端项目:

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;

 

pc端(含Mac)项目:

font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;

 

移动和pc端项目:

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

 

首先说说字体的种类,字体分为五大种类,然而各设备的支持情况也个不相同,如,

各移动设备系统支持情况:

五大类字体 安卓4.0 IOS6.0 WP8
sans-serif(无衬线) 支持 支持 支持
serif(衬线) 支持 支持 支持
monospace(等宽) 支持 支持 支持
fantasy(梦幻) 不支持 支持 不支持
cuisive(草体) 不支持 不支持 不支持

 

当然目前这只是移动设备各系统的支持情况,然而pc端个浏览器的支持情况也各不相同,如:

五大类字体 IE系列 Chrome Firefox
sans-serif(无衬线) 支持 不支持 不支持
serif(衬线) 支持 支持 支持
monospace(等宽) 支持 支持 支持
fantasy(梦幻) 支持 支持 支持
cuisive(草体) 不支持 不支持 不支持

 

下面介绍下个系统的默认字体和常用字体:

系统 默认西文字体 默认中文字体 其他常用西文字体 其他常用中文字体
Windows 宋体 宋体 Tahoma、Arial、Verdana、Georgia 微软雅黑、黑体
Android 4.0以下 Droid Sans Droid Sans Fallback Arial 无宋体、无微软雅黑
Android 4.0及以上 Roboto Roboto Arial 无宋体、无微软雅黑
iOS Helvetica Neue Heiti SC (黑体) Tahoma(v7.0)、Arial、Verdana、Georgia STHeiti(v7.0)、无宋体、无微软雅黑
Mac OS X 10.6以下 Helvetica Neue STHeiti (华文黑体) Tahoma、Arial、Verdana、Georgia 宋体、无微软雅黑
Mac OS X 10.6及以上 Helvetica Neue Hiragino Sans GB  (冬青黑体简体中文) Tahoma、Arial、Verdana、Georgia 宋体、无微软雅黑

参考资料: iOS6字体列表iOS7字体列表Mac OS X  10.6字体列表Mac OS X 10.7字体列表 等,在看了一些资料之后,对系统和浏览器下的字体就有了一个基本的认识。

有很多同学看到上面这些表格里面的结论,可能就会想到:可以只设置西文字体不设置中文字体。

只设置西文字体不设置中文字体是否可以?答案当然是不可以。因为上面这些系统和浏览器的默认字体也仅仅是是一个理想状态下的设置,这些默认字体仅限于浏览器或系统最初的默认字体。现在的手机都支持字体更换,对于浏览器而已也是如此,现在的浏览器都支持用户自己设置字体。因此,只设置西文字体而忽略中文字体设置是存在一定的危险性的。

 

对于现在Adroid系统的各种字体app,如:字体管家、字体管理等。如果用户自己下载相关的app字体软件将字体改掉,这种情况下,我们该如何处置?

如果用户将默认的系统字替换掉,那我们就只能用其他的中文字体来代替现实,然而就目前而言,移动端的中文字体非常少(几乎是唯一性),因此,本人还没有找到相应的解决办法,后期找到方法再分享出来。

相关 [网页 字体] 推荐:

中文字体网页开发指南

- - 阮一峰的网络日志
字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比 英文字体,中文字体的网页开发有着极大的局限性. 因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体. (*注:确实有 网站提供中文字体的web服务,从技术角度,我认为这样做不可取.

网页字体设置你了解吗?

- - 携程UED
以前做项目的时候就依葫芦画瓢的设置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等类似的字体,然而当更多的设备和系统出现后,以前这样的设置已不能满足网页在各设备上的显示需求. 就拿最简单的宋体(simsun)来说吧,在Windows系统下显示是一个比较容易阅读的字体,然而在Mac上简直无法直视,如下图给出一个优化前后页面的对比效果:.

网页射妓湿必备字体快速查看扩展:WhatFont

- 孙想钱 - Chrome迷
WhatFont 可以让你以最简单的方法了解到网页上所使用的字体,比神马Firebug、Chrome Developer Tools 都要简单,你只需要点击一下扩展按钮,然后把鼠标指向网页上的文字上就可以了,文字所使用的字体就会自动显示出来,如果再在文字上点击一下,就会看到改文字字体相关的详细内容,包括字号、行高等等.

45个网页中充满创意的字体排版

- Choope - 帕兰映像
印刷排版的历史或许和人类的历史几乎一样长. 大字体能够很快捉住网页浏览者的注意力. 在网页设计时,选择一个正确的字体排版方案是首要考虑的工作. 事实上,文字拥有的力量能将原有的设计彻底颠覆. 由于大字体能将网页信息大声呼喊出来,用户体验因此得到激发,因此大字体深得设计师们的喜爱. 大字体可以运用在网页的任何地方,如果用在页头,它显得很酷;如果用在文字内容中,它显得很威风;如果用在标记行上则能更加醒目.

不只是吸引,新的Google网页字体

- 梁 - cnBeta全文版
在过去,每当你创建一个网站或者网络应用的时候,能够让你选择的字体总是少得可怜——Times和Arial(宋体),这两种你随便挑吧. 而如果你想个性,就需要使用Adobe Flash或者嵌入图像文本. 而弊端是,图像文本是不能自动被翻译成其他语言的,并且不能被搜索引擎索引. 好了,现在有了Google网页字体,可以使你在你的网页里使用几百种字体,而不用担心安全性.

45个网页中创意的大字体设计

- SmallColor - 前端观察
译自:45 Creative Examples of Large Typography In Web Design. 请尊重版权,转载请注明来源,多谢. 排版的历史可能和人类一样悠久. 大字体可以迅速吸引网站访问者的注意力. 所以在网页设计中,选择正确的字体被认为是最重要的一个工作. 事实上,设计可以被词语的力量所颠覆.

字体是网页设计中最重要的细节

- - 我爱水煮鱼
一个非创意性质的网页,最重要的内容,就是文字. 出现了文字,就会出现文字排版、字体选择、字体颜色大小粗细等细节. 而这些细节,往往是非常重要的细节. 好的字体排版,可以让人耐心的看完那些文字,然后得到其中的重要信息,还可以影响到浏览者阅读的心情. 同时,字体的选择、大小等,还应该配合企业的 VI 识别系统,还需要配合你作品需要表达的思想感情来确定(例如古典风格,应该选择哥特式字体等).

给设计师的忠告:字体排版是网页设计的基础

- - 雷锋网
这是一个让多少设计师魂牵梦营,辗转反侧的问题. 当你一旦知晓答案,犹如彩虹从天空中飘落,耳边有乐队为你伴奏,甚至可以从妳的那个MR.Right那得到梦寐以求的舌吻……这是个什么样的问题呢. 嗯,那就是网页设计的秘密~~(大家别拍我,原作者写的). 这是一个难度很高的问题,也很难有公论. 早在2006年, Oliver Reichenstein写了此文《.

为苹果 iPad 上的 Safari 浏览器添加文字放大/缩小按钮,随时调整网页字体大小

- - 苹果fans-中文 Apple Blog
    用苹果 iPad 浏览网页时,受屏幕尺寸限制,网页上的文字可能被缩得太小看不清楚. 一般做法是两指张开放大网页,这样虽然能看清文字,但不得不经常左右滑动才能看到整个网页. 下面介绍个文艺做法:只调节字体大小,网页尺寸不变,还是 iPad 一屏幕看全.     首先用苹果 iPad 随便打开两个网页,添加到 Safari 浏览器的书签栏(注意,是书签栏,不是直接加为书签).

InucurryFont,噩梦字体

- 季季 - 比特客栈的文艺复兴
为什么字体名称不是Incubator. 因为魔法少女小圆并不是Gekidan Inu Curry(劇団イヌカレー)第一次使用这种字体. 请见天元突破官方小剧场之オレノ×××ハウチュウヒトツ. 下载来源,本地下载,字体研究.