详解中文字体
访问一峰老师博客:http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html
相比英文字体,中文字体的网页开发有着极大的局限性。因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体。
(*注:确实有网站提供中文字体的web服务,从技术角度,一峰老师不推荐这样做)
不同的操作系统、不同的版本预装不同的字体(因为版权),几乎没有交集。因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈现字体效果。
1.操作系统的预装字体
操作系统决定了开发者可以使用的字体。
Windows操作系统:
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋GB2312:FangSongGB2312
楷体GB2312:KaiTiGB2312
微软雅黑:Microsoft YaHei (Windows 7开始提供)
OS X操作系统:
冬青黑体: Hiragino Sans GB (SNOW LEOPARD开始提供)
华文细黑:STHeiti Light (又名STXihei)
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
2.font-family命令:
CSS的font-family命令,指定了网页元素所使用的字体
font-family: Georgia, "Times New Roman",
"Microsoft YaHei", "微软雅黑",
STXihei, "华文细黑",
serif;
规则:
(1)优先使用排在前面的字体。
(2)如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。
(3)如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。
应用:
根据这些规则,font-family应该优先指定英文字体,然后再指定中文字体。否则,中文字体所包含的英文字母,会取代英文字体,这往往很丑陋。红框内的英文字母,左边采用英文字体渲染,右边采用中文字体渲染,哪一种效果比较好,一目了然。
红框内的英文字母,左边采用英文字体渲染,右边采用中文字体渲染,哪一种效果比较好,一目了然。
为了保证兼容性,中文字体的中文名称和英文名称,应该都写入font-family。比如,"微软雅黑"的英文名称是Microsoft YaHei。
此外,中文字体的中文名称,以及由多个单词组成的英文名称,应该放在双引号内。
3.Windows平台和Mac平台:
由于Windows和Mac的中文字体没有交叉,所以应该同时为两个平台指定字体。
常见的做法是,Windows平台指定"微软雅黑"(Microsoft YaHei),Mac平台指定"华文细黑"(STXihei)。
4.衬线体和无衬线体
所谓"衬线体"(Serif),指的是笔画的末端带有衬线的字体。
对于繁体字来说,微软正黑(Microsoft JhengHei)是无衬线体,新细明体(PMingLiU)是衬线体。
简体字来说,微软雅黑(Microsoft yahei)是无衬线体,宋体(SimSun)是衬线体。
一般而言,衬线体装饰性强,往往用于标题;无衬线体清晰度好,往往用于正文。
5.几种常见中文字体
5.1宋体(SimSun)
宋体是最常见的中文字体,如果没有指定字体,操作系统往往选择它来渲染。很多人认为,这种字体并不美观。
5.2微软雅黑(Microsoft YaHei)
微软雅黑的美观度和清晰度都较好,可以作为网页的首选字体。它在Mac平台的对应字体是华文细黑(STXihei)。
但是,Windows XP没有预装这种字体,这时可以选择黑体(Simhei)替代。不过,黑体比较粗,不应用于字号较小的文字。
5.3仿宋(FangSong)
这种字体是衬线体,比宋体的装饰性更强。如果字号太小,会影响清晰度,所以只有在字号大于14px的情况下,才可以考虑这种字体。
它在Mac平台的对应字体是"华文仿宋"(STFangsong)。
5.4楷体(KaiTi)
楷体也是衬线体,装饰性与仿宋体接近,但是宽度更大,笔画更清楚一些。这种字体也不应该在小于14px的情况下使用。
它在Mac平台的对应字体是"华文楷体"(STKaiti)。
- 浏览: 72585 次
- 性别:
文章分类
最新评论
发表评论
-
前端学习文章【1】
2015-08-17 09:20 355移动时代的前端加密 http://div.io/topic ... -
Animator:短小精悍的CSS3动画库
2015-07-05 08:47 880参考:http://www.w3cfuns.com/blog ... -
前端在线工具汇总
2015-07-03 11:15 618在线工具集锦: http://tool.oschina. ... -
阿拉伯语等右向左排版文字CSS解决方案
2015-06-28 10:26 4135国际化市场,二十七国文字,其中免不了“反常态”的语种,比如 ... -
\5fae\8f6f\96c5\9ed1的意思
2015-06-02 10:59 926下面这个CSS是啥意思:font-family:\5FAE ... -
用3个步骤实现响应式网页设计
2014-11-04 15:44 592第一步:Meta标签(查看演示)大多数移动浏览器将 ... -
收藏本站代码
2014-10-30 10:20 879function addToFavorite() { ... -
有效防止移动搜索转码
2014-10-16 14:32 539在全站头部加个meta: <metahttp- ... -
Css Sprite
2014-09-14 17:43 450Css Sprite也被为CSS精灵,这是前端攻城师必 ... -
修改输入框placeholder文字默认颜色-webkit-input-placeholder
2014-09-14 16:42 2963html5为input添加了原生的占位符属性placeho ... -
响应式设计的 5 个 CSS 实用技巧
2014-09-13 16:15 483响应式的Web设计其实并不难,但是要让元素在布 ... -
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2014-09-10 21:41 608HTML5的语义化标签以及 ... -
编写高质量代码base.css
2014-09-04 16:43 605@charset "utf-8"; / ... -
em(倍)与px的区别
2014-09-04 16:39 353在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝 ... -
前端的一些内容及各大浏览器的兼容性
2014-08-26 22:04 563默认样式重置(css reset) ... -
IE7下 z-index的bug
2014-08-24 17:43 389z-index 有时候设置了很高的值如:z-index:99 ... -
如何在IE7下兼容半透明
2014-08-24 09:51 464background:#3598DB; filter:al ... -
从Web字体谈起——默认字体样式设置
2014-08-01 10:07 2430在网页设计中字体的设置不可小觑,好的字体让人赏心悦目,凌乱 ... -
响应式十日谈第一日:使用 rem 设置文字大小
2014-07-24 10:50 589上面回顾: 在序言中我们已经提到了响应式的一些基本理念, ... -
搜狐WEB标准_前端技术应用规范
2014-07-22 16:16 436搜狐WEB标准_前端技术应用规范
相关推荐
使用CSS来编辑字体有各种各样的方法,每位设计师都会有自己偏爱的设计习惯,但必须选择更能提高用户体验的方法。今天暴风彬彬将集中讨论字体大小的控制来体 在设计网页时,没有比页面的外观更重要的了。所以,如果...
该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素。 语法格式 E+F{CSS样式属性 } 说明 选择紧贴在E元素之后F元素。 临近兄弟选择器(+) 示例 普通...
2.1.3 ID选择器 2.2 选择器声明 2.2.1 集体声明 2.2.2 选择器的嵌套 2.3 CSS的继承 2.3.1 父子关系 2.3.2 CSS继承的运用 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.1.1 字体 ...
完全控制如何使用自定义CSS选择器和样式应用字体。 避免使用带有预设和自定义选择器的图标字体中的“豆腐”来忽略图标元素。为什么? 字体设计师花了无数的时间来创建字体打样和假设计来测试其字体。 这是字体设计...
花括号内是对该对象设置的其体样式。 2.属性和属性值以“键值对”的形式出现, 3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等, 4.属性和属性值之间用英文”:”连接 5.多个“键值对”之间用英文”;...
2.1.3 ID选择器 2.2 选择器声明 2.2.1 集体声明 2.2.2 选择器的嵌套 2.3 CSS的继承 2.3.1 父子关系 2.3.2 CSS继承的运用 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.1.1 字体 ...
2.1.3 ID选择器 2.2 选择器声明 2.2.1 集体声明 2.2.2 选择器的嵌套 2.3 CSS的继承 2.3.1 父子关系 2.3.2 CSS继承的运用 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.1.1 字体 ...
FontExpert 是一款优秀的电脑字体...大家可以将之体监为文本段清或详细字蒋映射,可以轻松选择所需的字体天小,字体样式或颜色。 2、将关键字,评级和类别:分配给字体在新标念视图中指定关键字,类别,评级和字软件,
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
网页设计的工作目标 是通过使用更合理的颜色 字体 图片 样式进行页面设计美化 在功能限定的情况下 尽可能给予用户完美的视觉体验 高级的网页设计甚至会考虑到通过声光 交互等来实现更好的试听感受 ">网页设计 根据...
CSS样式层叠顺序 当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。 正如以前所提及的,网页制作者和读者都有...
- WOFF2字体文件:114个,提供网页字体的多样化选择。 - EOT字体文件:90个,兼容性字体格式。 - TTF字体文件:90个,TrueType字体格式。 - WOFF字体文件:90个,Web开放字体格式。 项目描述:该项目是一个基于SSM...
这是一款很优秀的网页编辑器,类似于QQ空间中的文本编辑器,你可以上传图片,视频,音频,可以设置包括字体样式在内的很多属性,还可以选择设计表情,如果你也之前没有接触到没关系,里面提供了大量的详细的实例可以...
8.网页设计主要包括配色、字体、布局3个方面,其中最主要的是网页的布局,在进行网页设计时,我们需要对网页的版面布局进行整体的规划。 9.在Dreamweaver中,捆绑了javascripts和css3特效库,提供了一种友好的、可视...
字体样式标签 水平线标签 大纲级别标题标签 图像标签 超链接标签 嵌入多媒体 表格与列表 表格标题和标题单元格 合并单元格 有序和无序列表 制作滚动效果 滚动图片 层 表单 表单元素 textarea标签 ...
同时还详细介绍CSS 3的相关知识,包括新增选择器、文字与字体样式、颜色样式、盒样式、背景与边框样式、变形处理、多媒体和动画等内容。《HTML5+CSS3网站布局应用教程》语言通俗易懂,案例丰富多彩,知识全面、指导...
4.5.1 应用字体样式 4.5.2 应用段落样式 4.6 图片样式设计 4.6.1 图片定位 4.6.2 图片剪切 4.6.3 图片替代文本 4.6.4 Flash替代文本 4.7 链接样式控制 4.7.1 链接控制 4.7.2 CSS按钮 4.7.3 图片翻转链接 4.7.4 面包...
对于一个出色的网页,字体的选择是相对关键的,无奈设计师必须考虑用户的本地端是否有相应的字体,因此设计常常只能使用一些较为大众化的常见字体,而舍弃更加适合的字体。在 CSS3 中,这一情况将可以改变。CSS3 中...