网页字体设置你了解吗
来源:互联网 发布:淘宝手机怎么上传宝贝 编辑:程序博客网 时间:2024/06/10 13:32
以前做项目的时候就依葫芦画瓢的设置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等类似的字体,然而当更多的设备和系统出现后,以前这样的设置已不能满足网页在各设备上的显示需求。
就拿最简单的宋体(simsun)来说吧,在Windows系统下显示是一个比较容易阅读的字体,然而在Mac上简直无法直视,如下图给出一个优化前后页面的对比效果:
因此,出于种种原因,促使我不得不去对字体做一个相应的了解。
对于网站字体设置,本文给出以下意见:
移动端项目:
pc端(含Mac)项目:
移动和pc端项目:
首先说说字体的种类,字体分为五大种类,然而各设备的支持情况也个不相同,如,
各移动设备系统支持情况:
五大类字体安卓4.0IOS6.0WP8sans-serif(无衬线)支持支持支持serif(衬线)支持支持支持monospace(等宽)支持支持支持fantasy(梦幻)不支持支持不支持cuisive(草体)不支持不支持不支持
当然目前这只是移动设备各系统的支持情况,然而pc端个浏览器的支持情况也各不相同,如:
五大类字体IE系列ChromeFirefoxsans-serif(无衬线)支持不支持不支持serif(衬线)支持支持支持monospace(等宽)支持支持支持fantasy(梦幻)支持支持支持cuisive(草体)不支持不支持不支持
下面介绍下个系统的默认字体和常用字体:
系统默认西文字体默认中文字体其他常用西文字体其他常用中文字体Windows宋体宋体Tahoma、Arial、Verdana、Georgia微软雅黑、黑体Android 4.0以下Droid SansDroid Sans FallbackArial无宋体、无微软雅黑Android 4.0及以上RobotoRobotoArial无宋体、无微软雅黑iOSHelvetica NeueHeiti SC (黑体)Tahoma(v7.0)、Arial、Verdana、GeorgiaSTHeiti(v7.0)、无宋体、无微软雅黑Mac OS X 10.6以下Helvetica NeueSTHeiti (华文黑体)Tahoma、Arial、Verdana、Georgia宋体、无微软雅黑Mac OS X 10.6及以上Helvetica NeueHiragino Sans GB (冬青黑体简体中文)Tahoma、Arial、Verdana、Georgia宋体、无微软雅黑参考资料:iOS6字体列表、iOS7字体列表、Mac OS X 10.6字体列表、Mac OS X 10.7字体列表 等,在看了一些资料之后,对系统和浏览器下的字体就有了一个基本的认识。
有很多同学看到上面这些表格里面的结论,可能就会想到:可以只设置西文字体不设置中文字体。
只设置西文字体不设置中文字体是否可以?答案当然是不可以。因为上面这些系统和浏览器的默认字体也仅仅是是一个理想状态下的设置,这些默认字体仅限于浏览器或系统最初的默认字体。现在的手机都支持字体更换,对于浏览器而已也是如此,现在的浏览器都支持用户自己设置字体。因此,只设置西文字体而忽略中文字体设置是存在一定的危险性的。
对于现在Adroid系统的各种字体app,如:字体管家、字体管理等。如果用户自己下载相关的app字体软件将字体改掉,这种情况下,我们该如何处置?
如果用户将默认的系统字替换掉,那我们就只能用其他的中文字体来代替现实,然而就目前而言,移动端的中文字体非常少(几乎是唯一性),因此,本人还没有找到相应的解决办法,后期找到方法再分享出来。
本文作者:破男孩 转载请注明来自:携程设计委员会
- 网页字体设置你了解吗?
- 网页字体设置你了解吗?
- 网页字体设置你了解吗
- 网页字体设置
- 网页字体设置
- 让你的网页引入思源字体
- 五步让你了解网页web标准布局
- 如何用css设置网页字体
- 如何用css设置网页字体
- 网页设计之字体设置(上)
- 网页设计之字体设置(中)
- html网页字体颜色设置大全
- html5 css3网页字体的设置
- html5 css3关于网页字体设置
- 用CSS3的REM设置网页字体
- web网页引入自定义字体设置
- 一文让你彻底了解iOS字体相关知识
- 一文让你彻底了解iOS字体相关知识
- 了解AMS,WMS和Android视图的关系
- 极光推送-服务端端智慧人社消息推送方式
- linux命令提示符[root@localhost ~]#详解
- 大二 新的开始。
- mysql忘记密码修改
- 网页字体设置你了解吗
- Jetty 的工作原理以及与 Tomcat 的比较
- Android Bottom Sheet详解
- Palindrome Number(求一个数是否是回文整数)
- 【索引】PAT乙级题目题解
- Android 命名规范 (提高代码可以读性)
- Python排列组合
- 内部排序与外部排序
- 【开发】实用小技巧