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类，不管什么字体，都一个样子。

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

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. Hadoop2.6.0版本MapReudce示例之WordCount（一）

    一.准备测试数据 1.在本地Linux系统/var/lib/Hadoop-hdfs/file/路径下准备两个文件file1.txt和file2.txt,文件列表及各自内容如下图所示: 2.在hdfs中 ...

  2. Google Code Jam 2014 Round 1 A：Problem C. Proper Shuffle

    Problem A permutation of size N is a sequence of N numbers, each between 0 and N-1, where each numbe ...

  3. 详细的linux目录结构详细介绍

    详细的linux目录结构详细介绍 --树状目录结构图 下面红色字体为比较重要的目录 1./目录 目录 描述 / 第一层次结构的根,整个文件系统层次结构的根目录 /bin/ 需要在单用户模式可用的必要命 ...

  4. python爬虫学习研究

    目标:做一个小爬虫项目 2017年6月4日13:32:17       mooc网教程Python爬虫入门一之综述要学习Python爬虫,我们要学习的共有以下几点:Python基础知识Python中u ...

  5. eclipse 给jar包关联javadoc

    1.右键点击Referenced Libraries下的jar --> 选择 Build Path --> Configure Build Path. 2.选择jar的Javadoc lo ...

  6. ibatis中井号跟美元符号区别(#.$)

    1.#可以进行预编译,进行类型匹配,#变量名# 会转化为 jdbc 的 类型 $不进行数据类型匹配,$变量名$就直接把 $name$替换为 name的内容 例如: select * from tabl ...

  7. Powerdesigner Name与Comment的互相转换

    使用说明: 在[Tools]-[Execute Commands]-[Edit/Run Script] 下.输入下面你要选择的语句即可: 1.Name填充Comment '把pd中那么name想自动添 ...

  8. The hidden layers are either convolutional, pooling or fully connected.

    https://en.wikipedia.org/wiki/Convolutional_neural_network Convolutional layers apply a convolution ...

  9. java基础入门之九九乘法表

    /* 自学java 九九乘法表 Power by Stuart Date: 2015.4.23 */public class Math { public static void main (Strin ...

  10. （3）mac下"-bash: mysql: command not found"解决方案

    针对 mysql: command not found 输入命令 $ ln -s /usr/local/mysql/bin/mysql /usr/bin 假如你人品不好,被打脸了,提示你权限不够: l ...