<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. #define && const

    (1) 编译器处理方式不同 define宏是在预处理阶段展开. const常量是编译运行阶段使用. (2) 类型和安全检查不同 define宏没有类型,不做任何类型检查,仅仅是展开. const常量有 ...

  2. 数据库迁移 Migrator.Net

    转载: [强烈推荐]数据库迁移利器:Migrator.Net Migrator.NET:https://github.com/migratordotnet/Migrator.NET fluentmig ...

  3. AP聚类算法(Affinity propagation Clustering Algorithm )

    AP聚类算法是基于数据点间的"信息传递"的一种聚类算法.与k-均值算法或k中心点算法不同,AP算法不需要在运行算法之前确定聚类的个数.AP算法寻找的"examplars& ...

  4. Javascript之高效编程

    前言: Javascript绝对是最火的编程语言之一,一直具有很大的用户群,具有广泛的应用前景.而在前端开发中,它也是三驾马车之一,并且是最重要的一环.要想给用户提供更流畅的操作体验,更友好的交互,对 ...

  5. Objective-C:Foundation框架-常用类-NSDictionary

    与NSString.NSArray一样,NSDictionary是不可变的,其对应可变类型为NSMutableDictionary.其用法如下: #import <Foundation/Foun ...

  6. Play framework 2.0 -应用程序全局设置(转)

    转载自: http://shenbai.iteye.com/blog/1517366 1.全局对象 在工程中定义全局对象可以允许你操作你的应用程序的全局设置.这个全局对象必须定义在根包下. impor ...

  7. regsvr32 注册.dll的用法

    Regsvr 32命令是Windows中控件文件(如扩展名为DLL.OCX.CPL的文件)的注册和反注册工具. 命令格式 Regsvr32 [/s] [/n] [/i[:cmdline]] dllna ...

  8. C++-const_cast, reinterpret_cast, static_cast的用法

    /////////////////////////////////////////////////////////////////////////////// // // FileName : cas ...

  9. C++string的操作

    #include <iostream> using namespace std; int main() { //initilization string str("abc.ddd ...

  10. nbtstat -a <IP> 会显示主机名、所在工作组等信息

    nbtstat -a <IP> 会显示主机名.所在工作组等信息