1、在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。

　　浏览器中展示网页文字内容时，文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。什么是字体族？字体族就是你在css代码中看到“font-family”的代码内的一类字体名称，例如下面这行代码：

font-family:"Comic Sans MS","幼圆","黑体",sans-serif;

　　按照W3C标准，浏览器在解析一行代码时首先会在系统中查找Comic Sans MS字体，如果系统内存在这个字体那么浏览器就会使用Comic Sans MS字体，如果没有的话就接着查找幼圆字体，以此类推直到浏览器可以表达系统存在的字体为止。

　　注意了，“sans-serif”不是某个字体的名称，而是一种在前面叙述的字体都无效时而最终选用的字体，称为浏览器通用字体，它取决于你所用的浏览器默认的通用字体是什么，可能是“Arial”，也有可能是“Helvetica”。

　2、网页常用字体通常分为5类：serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体)，这些通用的名称允许用户代理从相应集合中选择一款字体。
　　　　serif 字体在字符笔画末端有叫做衬线的小细节，这些细节在大写字母中特别明显。
　　　　sans-serif 字体在字符笔画末端没有任何细节，与serif字体相比，他们的外形更简单。
　　　　monospace 字体，每个字母的宽度相等，通常用于计算机相关书籍中排版代码块。
　　　　fantasy 和 cuisive 字体在浏览器中不常用，在各个浏览器中有明显的差异。

　3、网页常用字体

　　Sans-serif:

Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常
Lucida Family: Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。
Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
Tahoma: 也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。
Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。

　　Serif：

Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
Times: Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。

　　中文：

宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
华文细黑：Mac下的默认中文。

4、写个小demo，在各种浏览上测试了一下，各种浏览器对这个字体的解析还是有差异的。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>font</title>

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<meta name="author" content="@my_programmer">

<style type="text/css">

/*重置{*/

*{ padding:0;margin:0;} img{border:0;} li{list-style:none;}

/*}重置*/

div{font-size:1.2em;}

</style>

</head>

<body>

    <br/>

    --网页字体通常分为5类--

    <div style="font-family: sans-serif;">你好 hello world  &nbsp;&nbsp; sans-serif(无衬线) </div>

    <div style="font-family: serif;">你好 hello world &nbsp;&nbsp;  serif(衬线) </div>

    <div style="font-family: monospace;">你好 hello world  &nbsp;&nbsp; monospace(等宽) </div>

    <div style="font-family: fantasy;">你好 hello world  &nbsp;&nbsp;&nbsp;&nbsp; fantasy(梦幻) </div>

    <div style="font-family: cuisive;">你好 hello world  &nbsp;&nbsp; cuisive(草体) </div>

    <br/>

    --无衬线类--

    <div style="font-family: Helvetica, sans-serif;">你好 hello world  &nbsp;&nbsp; Helvetica </div>

    <div style="font-family: Arial, sans-serif;">你好 hello world &nbsp;&nbsp;  Arial </div>

    <div style="font-family: 'Lucida Grande', sans-serif;">你好 hello world  &nbsp;&nbsp; Lucida Grande </div>

    <div style="font-family: Verdana,sans-serif;">你好 hello world  &nbsp;&nbsp; Verdana </div>

    <div style="font-family: Tahoma, sans-serif;">你好 hello world  &nbsp;&nbsp; Tahoma </div>

    <div style="font-family: 'Trebuchet MS', sans-serif;">你好 hello world  &nbsp;&nbsp; Trebuchet MS </div>

    <br/>

    --衬线类--

    <div style="font-family: Georgia, serif;">你好 hello world &nbsp;&nbsp;  Georgia </div>

    <div style="font-family: Times, serif;">你好 hello world  &nbsp;&nbsp; Times </div>

    <br/>

    --中文字体--

    <div style="font-family: 宋体">你好 hello world  &nbsp;&nbsp; 宋体 </div>

    <div style="font-family: 微软雅黑">你好 hello world  &nbsp;&nbsp; 微软雅黑 </div>

    <div style="font-family: 华文细黑">你好 hello world  &nbsp;&nbsp; 华文细黑 </div>

    <div style="font-family: 黑体">你好 hello world  &nbsp;&nbsp; 黑体 </div>

</body>

</html>

　在chrome上显示的结果　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

   

　　　在ie8上显示的结果　

      

　　　　在firefox上显示的结果

5、在此次测试中发现：

　　android设备中各个浏览器都很不给力（ios的还没有测试，我想肯定也好不到哪去吧），android手机中各个浏览器支持的常用字体只有三种：

　　　　sans-serif(无衬线)类 : Arial; 　　//只要设置成sans-serif类，不管什么字体，都一个样子。
　　　　serif(衬线)类 ：Georgia；　　//只要设置成serif类，不管什么字体，都一个样子。
　　　　monospace(等宽)类　　//只要设置成monospace类，不管什么字体，都一个样子。

　　移动设备的浏览器还需要努力哦。

原文地址：

http://www.cnblogs.com/duanhuajian/archive/2013/01/31/2887088.html

Web中常用字体介绍（转）的更多相关文章

  1. Web中常用字体介绍

    1.在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体. 浏览器中展示网页文字内容时,文字字体都会按照设计 ...

  2. JDBC中常用对象介绍

    JDBC中的主要类(接口) 在JDBC中常用的类有: 1.DriverManager 2.Connection 3.Statement 4.ResultSet 1.DriverManager 其实我们 ...

  3. web 中常用的两种上传文件的方法总结

    这里我们来总结整理一下常用的两种文件上传方式以及要注意的东西: 1.springmvc .MultipartFile 的上传方式. 2.org.apache.commons.fileupload 使用 ...

  4. HT for Web 中Painter的介绍及用法

    鉴于许多同学对Painter不熟悉,所以撰写此文介绍下.Painter的中文意思是画家.漆工,那放到HT里是什么意思呢?很简单,这是HT特有的一种接口,允许开发者在拓扑及其它通用组件上使用Canvas ...

  5. 转-——推荐几个web中常用的一些js图表插件 - zccst

    http://www.tuicool.com/articles/bqq2Qn 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph f ...

  6. 推荐几个web中常用js图表插件

    作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart elycharts jquery ...

  7. SQL Server中常用全局变量介绍

    在SQL Server中,全局变量是一种特殊类型的变量,服务器将维护这些变量的值.全局变量以@@前缀开头,不必进行声明,它们属于系统定义的函数.下表就是SQL Server中一些常用的全局变量. 全局 ...

  8. iOS开发之网络编程--1、AFNetwork 3.x 的所有开发中常用基础介绍

    前言:第三方网络请求框架中AFNetwork 3.x收欢迎程度相当高的: 由于iOS 7 和 Mac OS X 10.9 Mavericks 中一个显著的变化就是对 Foundation URL 加载 ...

  9. C#中常用接口介绍

    1. IComparable接口 IComparable接口定义通用的比较方法.由类型使用的IComparable接口提供了一种比较多个对象的标准方式.如果一个类要实现与其它对象的比较, 则必须实现I ...

随机推荐

  1. linux主要目录的作用

    手动敲一遍.算是加强记忆吧~ /:文件系统的入口,也是最高一级的目录 /bin:最基本的且着急用户和普通用户都可以使用的命令放在此目录下,如:ls.cp等 /boot:存放Linux的内核及引导系统所 ...

  2. oracle 中使用触发器自动生成UUID

    create or replace trigger tri_test before insert on test for each row declare begin if :new.uuid is ...

  3. js和jsp

    1.js中的字符串赋值可以用' '或者" ". alert('1111'); alert("1111"); document.getElementById('d ...

  4. 我的VSTO之路(五)：Outlook初步开发之联系人扩展

    原文:我的VSTO之路(五):Outlook初步开发之联系人扩展 上一讲我们完成对Word的介绍,文本开始,我将着重介绍Outlook.Outlook是微软Office中一个非常实用的工具,尤其在一个 ...

  5. The fundamental knowledge of Node JS.

    D3 JSJava scirpt is an awesome language for Internface Design.All Obejcts in JavaScirpt could be use ...

  6. 搭建ftp环境

    首先明确,ftp站点设置在服务器上,而在客户端上来使用ftp工具来进行上传文件 具体环境搭建如下两个链接,一个server2003,一个是win7 server2003:http://jingyan. ...

  7. Bellman-Bord（贝尔曼-福特）

    include const int inf=0x3f3f3f3f; int main() { int m,n; scanf("%d%d",&n,&m); int u ...

  8. 从SG函数浅谈解决博弈问题的通法

    基于笔者之前对于几种二元零和博弈游戏的介绍,这里将其思想进行简单的提炼,并引出解决这类二元零和博弈游戏的强大工具——SG函数. 其实对于博弈游戏如Bash.Nim等基本类型,异或一些比较高级的棋类游戏 ...

  9. 简单的Goto运算演示程序

    /* * 该程序用于计算某个项集的Goto集 * RexfieldVon * 2013年8月11日2:34:50 */ #include <stdio.h> #include <st ...

  10. Wireless Password - HDU 2825（ac自动机+状态压缩）

    题目大意:有个人想破解他邻居的密码,他邻居告诉了一些关于这个密码的信息,并且给他一个单词集合,他用这些信息判断一下最少有多少种密码. 1->, 所有的密码都是有小写字母组成. 2->,密码 ...