<span style="font-family:sans-serif">Lorem Ipsum</span> 
<span style="font-family:sans-serif,Arial">Lorem Ipsum</span>

第一种写法的错误在于——它相当于根本没有指定字体,仍旧是交由浏览器选择字体。写了相当于没写。

第二种写法的错误在于顺序。因为通用字体族应该在一个font set中其它所有字体都失效时才起作用。因此,将指定字体放在通用字体之后,会造成制定字体尚未匹配时就使用了通用字体。所以,你应该务必使通用字体处在font set中的最后一位。

serif

Serif 在印刷学上指衬线字体。为了理解衬线字体的概念,大家先看几个典型的衬线字体的例子:

My 
Georgia字体King 
Times New Roman 字体汉字 
宋体

单词 My 中的字母 “M”上下方突出的短横线就是所谓的衬线。同样,y的上方,K的上下,i 和n的下方也都有衬线,所以这些字体都被称为衬线字体。但衬线字体并不一定都有衬线,比如上面例子中的g, “汉”和“字”。事实上,只要满足末端加强原则的字体都是衬线字体。所谓的末端加强,就是使用衬线或粗细变化,使字体笔画的末端得到加强,以改善小号文字的可读性。比如上面例子中的y的下半部分,还有宋体的中文字符,都是采取加粗笔划的末端来达到末端加强的效果。除此之外,很多衬线字体还会采用加强竖向笔划(比如宋体中竖比横粗),夸张字形(最明显的就是小写g这个字符了)等方法进一步改善它的可读性。

因为衬线字体的可读性非常好,所以它应用的最多的地方也正是出版物或者印刷品的正文内容等以大段文字作为表现形式的作品上。

比较常见的衬线字体有 Georgia, Garamond, Times New Roman, 中文的宋体等等。

- sans-serif

衬线字体以外的一切字体都是无衬线字体。sans- 这个前缀其实是法语,所以比较标准的发音是 /san/ 而不是 /sans/。它的意思是“没有”。所以sans-serif就是无衬线字体。

Gut  
Verdana 字体Might  
Arial 字体书写  
幼圆

无衬线字体比较圆滑,线条一般粗细均匀。比较适合用作艺术字、标题等。因为无衬线字体通常粗细比较均匀,所以在小字体显示的时候,可读性会降低,容易引起视觉疲劳。

常见的无i衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。

web字体的更多相关文章

  1. Monotype推出基于HTML5的Web字体平台

    著名字体公司Monotype近日宣布推出基于HTML5的Web字体平台,设计者可以访问近10万字体的目录. Monotype推出基于HTML5的Web字体平台 Monotype推出基于HTML5的We ...

  2. 如何把你的图标转换成web字体

    在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局 ...

  3. 制作web字体:CSS3 @font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font- ...

  4. 几种web字体格式

    目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体 ...

  5. web设计经验<七>13步打造优雅的WEB字体

    今天,大多数浏览器已经默认支持Web字体,日趋增多的字体特性被嵌入最新版HTML和CSS标准中,Web字体即将迎来一个趋于复杂的崭新时代.下面是一些基本的关于字体的规则,特别适用于Web字体. 原文地 ...

  6. CSS3:不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  7. css3 web字体记

    css3 web字体 @font-face语法 @font-face能够加载服务器端的字体,让客户端浏览器显示客户端没有安装的字体. @font-face{ font-family:<YourW ...

  8. Web字体工具整理,网页图标字体以及使用方法整理

    常用网站app logo 下载: http://www.iconfont.cn/collections/show/268?spm=a313x.7781069.0.0.nDYawz 1.Web字体免费生 ...

  9. ICOMOON!强悍的WEB字体图标制造器/Web字体使用实例

    IcoMoon!一个可以通过个性化设置来创建自定义图标(字体)的生成器!也可以将SVG图片,转换成web字体 IcoMoon是一项免费的服务,通过使用不同设置使我们能够创建自定义的ICON图或ICON ...

  10. Web字体库下载及转换工具

    1.字体现在网站: http://ztxz.org/ 2.Web字体在线格式转换器: http://www.freefontconverter.com/ 3.

随机推荐

  1. Poj 1273 Drainage Ditches(最大流 Edmonds-Karp )

    题目链接:poj1273 Drainage Ditches 呜呜,今天自学网络流,看了EK算法,学的晕晕的,留个简单模板题来作纪念... #include<cstdio> #include ...

  2. Eclipse添加jsp页面后引入java指令报错解决方法

    新建jsp页面老提示: Multiple annotations found at this line: - The superclass "javax.servlet.http.HttpS ...

  3. [整理]Linux压缩与解压缩命令整理。

    一.压缩文件命令 1.*.Z compress 程序压缩的档案:2.*.bz2 bzip2 程序压缩的档案:3.*.gz gzip 程序压缩的档案:4.*.tar tar 程序打包的数据,并没有压缩过 ...

  4. ACTIVITI 研究代码 之 模版模式

    模板方法模式需要开发抽象类和具体子类的设计师之间的协作.一个设计师负责给出一个算法的轮廓和骨架,另一些设计师则负责给出这个算法的各个逻辑步骤.代表这些具体逻辑步骤的方法称做基本方法(primitive ...

  5. ajax分页2:jquery.pagination +JSON 动态无刷新分页

    静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  6. C#启动一个外部程序(1)-WinExec

    C#启动一个外部程序(1)-WinExec 调用Win32 API.1. using System.Runtime.InteropServices; 2. //        //#define SW ...

  7. 用C#用C#实现窗体在规定时间弹出,例如:10:00.弹出后关闭。并在5分钟后再次弹出。5次后停止。最好有具体代码实现窗体在规定时间弹出,例如:10:00.弹出后关闭。并在5分钟后再次弹出。5次后停止。最好有具体代码

    run(){        while(true)        {                show();                if(条件)                {     ...

  8. html中offsetTop、clientTop、scrollTop、offsetTop

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  9. No module ata_piix found的解决方法

    在一台as4u6的机器上升级内核到2.6.18时,最好make install的时候报了一个WARNING: No module ata_piix found for 2.6.18, 开始没有在意,重 ...

  10. bzoj 3687 bitset的运用

    题目大意: 小呆开始研究集合论了,他提出了关于一个数集四个问题:1. 子集的异或和的算术和.2. 子集的异或和的异或和.3. 子集的算术和的算术和.4. 子集的算术和的异或和.目前为止,小呆已经解决了 ...