45IT.COM- 电脑学习从此开始!
DIY硬件教程攒机经验装机配置
设计Photoshop网页设计特效
系统注册表DOS系统命令其它
存储主板显卡外设键鼠内存
维修显卡CPU内存打印机
WinXPVistaWin7unix/linux
CPU光驱电源/散热显示器其它
修技主板硬盘键鼠显示器光驱
办公ExcelWordPowerPointWPS
编程数据库CSS脚本PHP
网络局域网QQ服务器
软件网络系统图像安全
页面导航: 首页 > 设计学院 > 网页设计 >

网页设计与字体优化

电脑软硬件应用网 45IT.COM 时间:2014-07-19 12:42 作者:佚名

以前做项目的时候就依葫芦画瓢的设置 { 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 宋体、无微软雅黑
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: baidushare.htm
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
推荐知识