<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. 集成 Union Pay - 银联支付

    作者感言 前面已经把WeChat SDK的支付, AliPay SDK搞得七七八八了, 接下来就是银联支付的Union Pay SDK.最后:如果你有更好的建议或者对这篇文章有不满的地方, 请联系我, ...

  2. HTML第二部分表单及使用Photoshop快速制作网页

    一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...

  3. SQL 创建索引的作用以及如何创建索引

    SQL 创建索引的作用以及如何创建索引 SQL 创建索引的作用 一.使用索引的优点: 1.通过唯一性索引(unique)可确保数据的唯一性 2.加快数据的检索速度 3.加快表之间的连接 4.减少分组和 ...

  4. 隐藏chrome空白标签栏的最近访问

    chrome版本: 29.0.1547.76 m 找到安装路径下Custom.css文件,添加.most-visited{display:none !important}来修改样式. 我的路径为:C: ...

  5. [整]常用的几种VS编程插件

    通过这些编程插件,你可以方便快捷的完成编程的各项任务,以下分别作下简单介绍,欢迎讨论交流. Visual Assist(强烈推荐)网址:http://www.wholetomato.com/功能:VA ...

  6. The Python web services developer: XML-RPC for Python

    原文地址:http://www.ibm.com/developerworks/webservices/library/ws-pyth10/index.html 摘要:概括地说,您可以将 XML-RPC ...

  7. 161018--NOIP模拟

    老实说,感觉自己好菜啊..(安慰自己省选做多了 T1:看似1e6很大,实际上常数52都能草过去...不知为何RE.. T2:记忆化搜索.看错题目条件QAQ,其实把自己暴力搜的程序改改就好了.. T3: ...

  8. 转: HTML的电子邮件链接标签mailto用法详解

    mailto是网页设计制作中的一个非常实用的html标签,许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址,这样网页浏览者一旦用鼠标单击一下由mailto组成的超级连接后,就能自动 ...

  9. bzoj 2037: [Sdoi2008]Sue的小球

    #include<cstdio> #include<iostream> #include<algorithm> using namespace std; struc ...

  10. C#Base64编码

    一. Base64的编码规则 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码.它将需要编码的数据拆分成字节数组.以3个字节为一组.按顺序排列24 位数据,再把这24位数据 ...