小谈中文环境下中文排版的font-family 字体选择
在开发Mindia 主题的时候,为了弄出相对好看的中文排版,特意补习了下中文排版的font-family 字体选择的相关资料。以下就从自己的角度说下自己的不算得上是收获的收获吧。
众所周知,由于Windows 与其他平台(Mac、Linux)的不通用性,字体渲染等问题导致在面对中文用户的时候不得不多重考虑;加之中文字体相对于英文字体目前仍然无法采用webfont形式的劣势以及目前移动设备的盛行,使得我们在大呼坑爹的同时不得不忍受并适应之。但什么样的环境就有不同的适应法则,对于小小的font-family 字体,极力用好当前资源才是王道,并在其他方面提高用户体验的不足。
老掉牙的东西
在进入正文之前,一些font-family 的旧知识(规则)还是要复习下几点,比如说:
1、中文字体有英文的名称,但建议是中英文名称都写上。比如说微软雅黑英文名为“Microsoft YaHei”,实际时候只写英文名称即可,但保险之策是中英文名称也写上,如:
font-family: Arial, "Microsoft YaHei", "微软雅黑", sans-serif; |
---|
2、写font-family 时候英文字体要写在中文字体前面。这个应该是知道的了,但鄙人认为,如果面对的是Windows用户为主的话,其实微软雅黑也可以直接写在前头,因为微软雅黑本身有相应的英文字符。
3、向下兼容,优雅降级
这个就熟悉的Windows来说吧,现在主流应该是Windows7 ,但还有不少用户用着宋体为主流的Windows xp,那么考虑到这点,SimSun, "宋体" 还是有必要的。
各平台的主流字体支持情况
各系统的默认字体和常用字体:
系统 |
默认西文字体 |
默认中文字体 |
其他常用西文字体 |
其他常用中文字体 |
---|---|---|---|---|
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 |
宋体、无微软雅黑 |
各移动设备系统支持情况:
五大类字体 |
安卓4.0 |
IOS6.0 |
WP8 |
---|---|---|---|
sans-serif(无衬线) |
支持 |
支持 |
支持 |
serif(衬线) |
支持 |
支持 |
支持 |
monospace(等宽) |
支持 |
支持 |
支持 |
fantasy(梦幻) |
不支持 |
支持 |
不支持 |
cuisive(草体) |
不支持 |
不支持 |
不支持 |
当然目前这只是移动设备各系统的支持情况,然而pc端个浏览器的支持情况也各不相同,如:
五大类字体 |
IE系列 |
Chrome |
Firefox |
---|---|---|---|
sans-serif(无衬线) |
支持 |
不支持 |
不支持 |
serif(衬线) |
支持 |
支持 |
支持 |
monospace(等宽) |
支持 |
支持 |
支持 |
fantasy(梦幻) |
支持 |
支持 |
支持 |
cuisive(草体) |
不支持 |
不支持 |
不支持 |
上结论
废话就不做分析了,结合参考资料,给出我目前在用的font-family 代码吧,不一定最好,欢迎赐教。
下面非全局定义,而是针对特殊div 下的个性化定义:
/*微软雅黑*/ .yahei{font-family: 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif!important} /*宋体*/ .songti{font-family: "Helvetica Neue", Helvetica,"Songti SC", "SimSun", serif!important} /*楷体*/ .kaiti{font-family: "Helvetica Neue", Helvetica, "KaiTi", "楷体", "STKaiti", "华文楷体", serif!important} /*华文仿宋*/ .fangsong{font-family: "Times New Roman", "Helvetica Neue", Helvetica, "FangSong", "仿宋", "STFangSong", "华文仿宋", serif!important} |
---|
如果是用于全局项目中,那么可能会有所不同,这里直接引用参考资料的代码:
/*移动端项目*/ 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; |
---|
当然,如何排布font-family 根本是看需求是什么,这个仅仅是作为参考。
参考资料:
https://ruby-china.org/topics/14005
http://ued.ctrip.com/blog/?p=3589
http://typo.sofi.sh/
http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html
http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/
- 机器学习之Python基础(一)
- 中国造机器人突破新高,将大量挤压就业空间,明天在哪里打工?
- 嵌入式数据库Perst
- USB 设备的PID-Product ID,VID-Vendor ID
- Asp.Net4.0/VS2010新变化(3):webform中也可以直接url路由
- IIS7上部署Asp.Net4.0时UrlRouting的若干问题
- As3.0中的反射
- 域名yg.cc以10.2万元的价格结拍,可搭建“摇滚”音乐平台
- 修改 Windows Host 文件工具
- win7下恢复“经典任务栏”/“快速启动栏”,关闭“窗口自动最大化”
- WCF和ASP.NET Web API 接口执行时间监控
- 额的神啊:AS3中Button被disable了,也会触发Click事件!
- [原创]CI持续集成系统环境---部署gerrit环境完整记录
- CentOS设置Mono环境变量
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【一天一大 lee】子集 (难度:中等)-Day20200920
- 用了这个jupyter插件,我已经半个月没打开过excel了
- Webpack学习笔记
- 正则表达式学习笔记
- R 可视化 | 华夫饼图
- 绝了!Python定时爬取微博热搜+pyecharts动态图展示
- 实战 | Python爬取B站柯南弹幕+Gephi梳理主线剧情
- 别再问我 Python 怎么识别数字验证码了!
- Python自动化办公 | 同事要我帮忙补写178份Word日报!别闹!
- Excel多区间判断,其实很简单
- 外观模式
- cp命令
- java基本数据类型及相互间的转换(转)
- 【java设计模式系列】1. 工厂方法模式(Factory Method)
- 为什么 Java 中 1000==1000 为 false ?