[转载]网页字体设置你了解吗?

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

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

出处:http://ued.ctrip.com/blog



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

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

移动端项目:

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字体软件将字体改掉,这种情况下,我们该如何处置?

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

[转载]网页字体设置你了解吗?

时间: 2024-11-10 07:15:59

[转载]网页字体设置你了解吗?的相关文章

网页字体设置你了解吗?

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

人机交互实践004—网页字体设置

test p { color: darkred } div { color: deepskyblue } .x1 { color: lightseagreen; font-size: 200%; font-style: italic } .x2 { color: yellow; font-weight: bold } a:hover { font-size: 200%; color: red } div p { color: ghostwhite } span { text-decoration

网页字体介绍以及网页常用字体设置

网页字体设置不同于平面设计等其他媒体设计有更多的艺术字体可供选择. 因为网页设计中永远不要假设客户的电脑上有你使用的字体.为了让我们的网页在绝大多数访客的电脑上看起来一致.就必须使用绝大多数访客电脑上都有的字体. 网页中的字体是通过css设定,如:font-family:'Microsoft Yahei',"simsun"; 意思是先找微软雅黑,如果没有就使用宋体字,当然,如果你的客户是windows中国用户宋体是默认字体,此时font- family:'Microsoft Yahei

【转载】深度解析Android中字体设置

原文:http://mobile.51cto.com/android-265238.htm 1.在Android XML文件中设置字体 可以采用Android:typeface,例如android:typeface=”monospace”.在这里例子中我们在Activity中对android:text=”Hello, World! 您好”分别进行了四种显示方式,依次为“Sans”,“serif”,“monospace”和系统缺省方式(经试验缺省采用采用sans).英文字体有差异,貌似中文字体没有

网页字体样式

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

使用 Cufon 渲染网页字体

这是一篇关于 Cufon 技术的小文章.什么是 Cufon 呢?简单的说,Cufon 是一个用来替代 sIFR 框架,实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库. 为什么要使用 Cufon 那么为什么要使用 Cufon 呢?这要从 Web 开发人员,所经常面对的一种"冲突",即"字体(Font Family)冲突"开始讲起. 通常的这一冲突总是爆发于 Web 页面的设计者(Designer)和开发者(Coder)之间.在很多场合下,Web

CSS中文字体设置

字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比英文字体,中文字体的网页开发有着极大的局限性.因为,一套中文字体最少也要有几千个字符,体积为几个MB:单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体.(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做.) 不同的操作系统.不同的版本预装不同的字体(因为版权),几乎没有交集.因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈

Type.js – 帮助你更好的控制网页字体排版

Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就可以用新的 CSS 属性了,就像编写任何其他的样式一样. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果

jQuery控制网页字体大小和肤色

在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能. 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮. <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <