web字体优化
来源:互联网 发布:沈阳开盘数据恢复 编辑:程序博客网 时间:2024/06/05 05:37
以前做项目的时候就依葫芦画瓢的设置 { 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字体软件将字体改掉,这种情况下,我们该如何处置?
如果用户将默认的系统字替换掉,那我们就只能用其他的中文字体来代替现实,然而就目前而言,移动端的中文字体非常少(几乎是唯一性),因此,本人还没有找到相应的解决办法,后期找到方法再分享出来。
本文作者:admin 转载请注明来自:携程设计委员会
- web字体优化
- web字体文件过大优化方案
- web字体
- 字体和常用web字体
- gitk 字体优化
- fedora 字体优化
- Web 字体的未来
- 默认Web字体样式
- 默认Web字体样式
- 默认Web字体样式
- 默认Web字体样式
- Web Font 自定义字体
- Web安全字体
- web图标字体
- CSS增加web字体
- web之图表字体
- 移动web字体
- web的字体处理
- UEditor具体使用(jsp)
- 视频内容加密封装技术研究
- HDOJ1021
- html&JavaScript&innerHTML演练(计算器):获取HTML内容、函数、按钮(三)
- Android_获取网络端的Xml和json
- web字体优化
- 机器学习ing
- Qt5.8 linux程序打包发布
- 集群基础------(heartbeat心跳组件)
- 【剑指Offer】面试题46:求1+2+3+...+n
- 常量缓存池浅析
- 程序员面试系列——插入排序
- 互联网电视技术方案分析与比较
- Servlet--ServletContext(三)获取web.xml配置参数