网页字体设置你了解吗？

以前做项目的时候就依葫芦画瓢的设置 { 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字体软件将字体改掉，这种情况下，我们该如何处置？

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

本文作者：破男孩　转载请注明来自：携程UED

转载于:https://www.cnblogs.com/sunshq/p/3948969.html

网页字体设置你了解吗？相关推荐

傲游浏览器能改字体吗网页字体设置方法简述
将网页字体调整为喜欢的格式,在一定程度上也能提高用户的使用体验,因此傲游浏览器推出了个性化的"网页字体更改"功能.那么,该如何使用这一功能呢?下面小编就来简单介绍一下傲游浏览器网页 ...
hbuilder怎么设置网页的大小_大明：网页字体大小怎么调？教你方法一键搞定
大家好,我是大明,网页的字体太大或太小都影响我们正常的浏览,导致网页字体大小不合适的主要原因是"显示适配器分辨率","显卡驱动问题","网页字体设置不 ...
element ui怎么调图标的大小_大明：网页字体大小怎么调？教你方法一键搞定
大家好,我是大明,网页的字体太大或太小都影响我们正常的浏览,导致网页字体大小不合适的主要原因是"显示适配器分辨率","显卡驱动问题","网页字体设置不 ...
html如何让网页的字变小,网页的字变小了怎么办网页字体调整方法【图文】
互联网是我们生活中使用的比较多的电子网络圈,我们有时候上网,网页上的字体突然变的很小,看起来觉得很不舒服.网页的字体为什么会突然变小呢?这可能跟我们的设置有关系,有时候我们下载了浏览器或者软件,会导致 ...
html字体怎么变大,网页字体怎么变大（html怎么改字体类型）
网页字体怎么变大(html怎么改字体类型) 出现这个问题首先要查看一下是不是因为网页字体设置不当的原因,详细操作步骤是:打开"网页",使用快捷键"ctrl+(NUM+或- ...
《众妙之门——网页排版设计制胜秘诀》——第3章设置网页字体的5 项原则和方法3.1 系统地进行网页版式设计...
本节书摘来自异步社区<众妙之门--网页排版设计制胜秘诀>一书中的第3章,第3.1节,作者: [德]Smashing Magazine 译者: 侯景艳 , 范辰更多章节内容可以访问云栖社区 ...
html语言表示字体的type,网页字体的设置 - html,html教程,html语言
网页字体的设置 - html,html教程,html语言 2018-11-29 网页字体的设置作者:未知文章来源:未知点击数:1613 更新时间2005-6-15 来源:http://www. ...
网页正文字体设置大中小代码
js代码: doZoom.js function doZoom(size){ var zoom = document.getElementById('Zoom'); zoom.styl ...
html网页字体的设置
html教程:网页字体的设置 ●字体(Font)的设置是网页制作新手遇到的第一个难点.如何控制字体大小,如何取消链接字体的下划线是网友来信问得最多的.好,我们来彻底研究一下字体的各个方面: ○字符集的 ...

网页字体设置你了解吗？

网页字体设置你了解吗？相关推荐

最新文章

热门文章