一： {font-family:serif,sans-serif,fantasy,cursive}表示什么意思

这是CSS中的五大字体家族。

serif
serif 中文翻译为“衬线字体族”。
serif 具有末端加粗、扩张或尖细末端，或以实际的衬线结尾的一类字体。
可以看出 serif 总是在文字末端做文章，这样做的目的是增强可读性，也就是说在字号比较小的时候，serif 一族的字体仍然是比较好辨认的。
serif 典型的字体有：Times New Roman、MS Georgia、宋体……
serif 还可衍生出两种字体族：petit-serif（小衬线字体族（末端变化不明显））、slab-serif（雕版衬线字体族（末端变化非常明显））。由于显示器显示的字都不大，所以一般将小衬线字体族看作无衬线字体族，比如其中的黑体。

sans-serif
sans-serif 中文翻译为“无衬线字体族”。sans- 前缀是法语，发音为 /san/，意为“无”。
sans-serif 字体比较圆滑，线条粗线均匀，适合做艺术字、标题等，与“衬线字体”相比，如果字号比较小，看起来就会有些吃力。
sans-serif 典型的字体有：MS Trebuchet、MS Arial、MS Verdana、幼圆、隶书、楷体……

cursive
cursive 中文翻译为“手写字体族”。
顾名思义，这类字体的字就像手写的一样。
cursive 典型的字体有：Caflisch Script、Adobe Poetica、迷你简黄草、华文行草……

fantasy
fantasy 中文翻译为“梦幻字体族”。
fantasy 主要用在图片中，字体看起来很艺术，实际网页上用得不多。
fantasy 典型的字体有：WingDings、WingDings 2、WingDings 3、Symbol……

monospace
monospace 中文翻译为“等宽字体族”。
我们知道英文中各字母是不等宽的，但用 monospace，各个字母就是等宽的了，就可以像中文一样排版了。
monospace 典型的字体有：Courier、MS Courier New、Prestige……

总结
总的来说字体分为两个大类：serif、sans-serif，这两个大类下又可以分：cursive、fantasy、monospace

二： 360和谷歌外部字体

最近，谷歌全面退出中国，谷歌官网域名google.com、谷歌香港google.com.hk都打不开， ping了一下google.com和google.com.hk两个域名的服务器情况，最后ping出来的IP地址均显示为“美国”，也就是说谷歌香港(google.com.hk)的服务器，已由香港转移至美国，所以链接时间会很长，甚至断断续续出现请求超时的情况。

这样就是说谷大神在中国再也神不起来了。欲哭无泪的是我们苦逼的IT啊，谷歌字库不能用了，经网上一番找寻终于在wangzhan.360.cn上给解决了，虽然对360没有什么好感，但其提供的这一套服务还是相当不错的！

字体库的引用方法：（注：360字体库最近挂掉了，其实早在15年初google就在北京设置了服务器，ping fonts.googleapis.com 也可以发现，ip为203.208.40.136，地址是北京电信海淀区，比360镜像要快很多,所以直接用fonts.googleapis.com即可，不必用fonts.useso.com）

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
(family就等字体名称，空格用+号代替)在页面调用

@import url(http://fonts.googleapis.com/css?family=Ubuntu);
(family就等字体名称，空格用+号代替)在样式文件里面调用，如font-family为 Wire One 则 http://fonts.useso.com/css?family=Wire+One

页面JS调用方法(families就等字体名称，空格用+号代替)

web字体库的样式调用方法：

样式里面用法：font-family: 'Poiret One', sans-serif;（字体名称）

三：（更详细的介绍）

原文链接： http://www.ibm.com/developerworks/cn/web/1505_zhangyan_googlefont/#icomments

使用 Google Fonts 为网页添加美观字体

在线字体提供丰富多样的字体样式，能使页面更美观，更具吸引力。Google Fonts 就是一个开源的在线字体库，使用起来简单快速。

前言

文字是网页中很重要的组成部分。为文字选择一个合适的字体，能够更好的展现一个网站的个性，表达所要传递的信息，同时吸引用户来产生兴趣。

说到字体，我们首先会想到 CSS 里面的 font，例如：

<html>
<head>
    <style>
        p { font-family: Arial, Helvetica, sans-serif; }
    </style>
</head>
<body>
    <p>some text</p>
</body>
</html>

在这段 HTML 代码中为<p>标签定义了字体，当浏览器解析<p>some text</p>标签时，首先会在系统中查找 Arial 这个字体，如果找不到，就找 Helvetica 字体，如果还是找不到，就会查找浏览器默认的 sans-serif(非衬线)字体，最后把文字渲染出来。

回页首

什么是安全字体

安全字体这个概念，也许很多人都不是很熟悉，我们先举个例子：

font-family: Arial, Helvetica, sans-serif;

这个对字体（font-family）的定义就是一个安全字体。每种操作系统都有自己默认安装的字体，浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同，有的甚至名称都不一样，在这种情况下，我们必须定义安全字体，使字体在所有的浏览器中都能够正常显示。

在上面这个 font-family 的定义中，我们选择 Arial 作为首选字体（注：Arial 字体是最常用的 sans serif 字体，也是 Windows 的默认字体，当字体很小是不容易阅读），但是，苹果系统中没有这个字体，所以我们选择 Helvetica（和 Arial 很相似）作为第二备选字体，最后我们选择 sans-serif 作为第三备选字体，如果在一个既没有 Arial 也没有 Helvetica 的系统里，那么浏览器会使用默认的 sans-serif 字体来渲染文字。这样，我们很大程度上保证了使用不同操作系统的访问者都能看到相同（至少是类似）的页面文字。

除了 Arial，常见的安全字体还有：

Verdana 字体，它是微软公司的核心字体之一，专门为屏幕显示而开发的。它的应用广泛，宽度大而易于阅读，是显示器中最清晰的字体。CSS 写法：font-family: Verdana, Geneva, sans-serif;
Times New Roman 字体，它是最常用的 serif 字体，是浏览器默认的字体。小号字的易读性也很差。CSS 写法：font-family: 'Times New Roman', Times, serif;

有兴趣的读者可以通过这个链接来查阅常用的安全字体。http://www.w3schools.com/cssref/css_websafe_fonts.asp

在网页开发中，应该尽量使用安全字体，也就是高度通用的字体，这样，访问者才能流畅的阅读网页的所有内容。

但是，网页设计师一定不会满足于使用这些安全字体，如何才能使用漂亮的字体，并能在普通用户的浏览器中被正确的渲染出来？答案是：使用@font-face 方案。

回页首

@font-face 标签简介

@font-face 被列为了 CSS3 的一项新特性，其实它并不是什么新鲜技术，它最早出现在 CSS2 的规范定义中，但是在 CSS2.1 中又被删除，现在被正式列入 CSS3。目前主流的浏览器（IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+）都能够支持这个属性，所以不用担心会有浏览器兼容性问题。

@font-face 允许您在网页中使用电脑中没有安装的字体，完全摆脱安全字体的限制。只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。

随着@font-face 的不断流行，产生了许多新的字体格式图标集，称为网络字体。Google Fonts API 就是基于@font-face 的特性开发的一套优秀的网络字体库。

网络字体的优点有很多：

使用的是真正的文本，而不是图片，放大和缩小都不会影响渲染效果，用户体验好；
可以被搜索引擎辨认；
不像图片每次需要重新生成，添加删除更方便。

回页首

如何使用 Google Fonts API

Google Fonts 提供了超过 600 种的高质量的字体，所有的浏览器都兼容，无需引入 JavaScript，简单易用，更重要的是，免费。（虽然，暂时不支持中文字体，因为中文字体库实在是太大了）。

现在来看下，如何在网页中使用 Google Fonts。

挑选字体

登录Google Fonts （谷歌字体官方网站）。（图 1）

图 1.Google Fonts 主页

在主页中，您可以直接浏览所有的字体，可以按单个词语来查看，或者按句子段落来查看整体效果，还可以调整字体大小。如果您对字体分类比较熟悉，就可以使用左边的搜索条件对字体作筛选。找到您喜欢的字体之后，点击"Add to Collection"按钮，然后在网页下方的"Collection"中即可找到您添加的所有字体。

使用选中的字体来测试您的文字

在上一页面（图 1）的"Collection"中，点击"review"。在预览页面中（图 2），输入您的测试文字，来查看效果。另外在"review"页面上，您还可以调整其它的与字体相关的样式，比如字体大小，间隔，变换，等等。在图 2 中，我们选择测试的是"Condiment"字体

图 2.Google Fonts 预览页面

在您的网页中添加字体链接。

如果确认使用该字体，在网页下方的"Collection"中，点击"Use"按钮，在接下来的页面中，您将看到详细的说明，包括字体链接和如何将字体添加到您的网页中。

有三种方式来添加字体链接：

Standard 方式：

<link rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Condiment'>

@import 方式：

@import url(http://fonts.googleapis.com/css?family=Condiment);

JavaScript 方式：
（通过添加动态脚本并执行来导入字体，代码省略）

下一步定义在那个标签上使用该字体，例如：在<class="myheader">标签上使用，

.myheader {font-family: 'Condiment', cursive;}

大功告成，您现在可以打开您的网页欣赏一下了(图 3)。

图 3.测试页面效果

清单 1.测试页面代码

<html>
          <head>
                     <link rel="stylesheet" type="text/css"
                               href='http://fonts.googleapis.com/css?family=Condiment'>
                    <style>
                             .myheader {
                                        font-family: Condiment, cursive;
                                        font-size: 48px;
                                        text-align: center;
                               }
                    </style>
          </head>
          <body>
                     <div class="myheader"> Test my own text !</div>
          </body>
</html>

优化字体包加载

如果您不是大范围的在网页中使用 Google 字体，只是在标题或 logo 里使用，那么可以在 url 里添加 text 参数，来限制加载的字体包的大小，最高能缩减 90%左右的大小，以此来节约下载流量。例如：http://fonts.googleapis.com/css?family= Condiment'&text=Hello

这样，您只会下载 h，e，l，o 这四个字母的字体，大大缩小了字体包的大小。

下载字体包

您还可以把字体包下载并安装到本地，这样您就可以在本地使用这些字体，比如在 Notepad，Microsoft Office 里。

方法为：在图 3 中，点击下载按钮，选择"Download the font families in your Collection as a zip file"

高级应用 API

Google Fonts 还开放了一些接口（称为 Developer API），用于获取字体库的信息数据。

比如实时获取字体库实际可用的字体及其相关信息：

https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

这个请求的返回结果是一个 JSON 类型的数据，包括了每种字体的名称，样式种类（比如 regular，italic），版本，修改时间，包含的样式包的请求地址，等等。

请注意，在 URL 里面有一个 key，这个 key 是和您的 web 应用工程相联系的，只有注册过的 web 应用才能成功调用 Developer API。我们必须要在 Google Cloud Console 注册之后，才能获取这个 key。

关于这个 Developer API，可以参阅这个链接。

回页首

结束语

Google Fonts 很强大，但是也碰到一些加载的问题，最好还是字体声明的时候，在最后添加一个安全字体，来保证万无一失。另外的一个建议是，在网页中要适量的使用花样的字体，让整个页面保持干净简洁。

四：关于＠font-face具体用法

1 http://www.w3cplus.com/content/css3-font-face

2 http://www.jb51.net/web/89797.html

CSS在线字体库，外部字体的引用方法的更多相关文章

css自定义字体----使用外部字体文件
css外部自定义字体给大家分享一个使用的css小技巧!记得收藏呀!相信大家在浏览各种网站会见到各种奇形怪状花里胡哨的文字,还有就是一些浏览器兼容性问题,不会支持一些特殊的字体!给大家分享一个极其简单 ...
CentOS 7 安装字体库 & 中文字体
前言报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效: 如上图可以看出,不仅没有中文字体,连字体 ...
Centos7 安装字体库&中文字体
1.概述在安装一些服务的时候,会涉及到字符编码与字体的问题,字符编码一般在数据库或代码级别设置,字体一般是在系统级别设置.如安装使用jira或confluence的时候,使用一些宏的时候经常会出现乱 ...
Linux CentOS 7 安装字体库 & 中文字体
前言报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效: 如上图可以看出,不仅没有中文字体,连字体库 ...
CSS在线字体库，外部字体的引用方法@font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...
css引用第三方字体库
对应的CSS文件中如下方式进行字体库的引用: @font-face { font-family: '造字工房情书'; src: url('../fonts/MFQingShu_Noncommercia ...
微信小程序如何引入外部字体库iconfont的图标
每天学习一点点编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...
大众点评评论数据抓取反爬虫措施有css文字映射和字体库反爬虫
大众点评评论数据抓取反爬虫措施有css文字映射和字体库反爬虫大众点评的反爬虫手段有那些: 封ip,封账号,字体库反爬虫,css文字映射,图形滑动验证码这个图片是滑动验证码,访问频率高的话,会出 ...
CSS引入外部字体方法，附可用demo
有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需要我们在css中进行定义并且引入字体文件路径然 ...

随机推荐

PDO讲解
PDO的知识点标注在代码里 <?php //造DSN:驱动名:dbname=数据库名:host=服务器地址 $dsn="mysql:dbname=mydb;host=localhost ...
[Ubuntu] Linux下使用google app engine，无法打开https网站的解决方法
为什么这里写的是 google app engine?原因我就不解释了.步骤如下: 1)安装证书导入工具:$ sudo apt-get install libnss3-tools 2)导入CA.crt ...
实施费用也能DIY--走出软件作坊：三五个人十来条枪如何成为开发正规军（九）[转]
上次咱们讲完了开发费用的计算,很多人在后面跟帖在那里算费用. 有人说:你把程序员都不当人,94天,一天都不休息啊. 我想答曰:94天,是工作时间.不算双休日在里面.也就是说,实际的开发周期长度是94+ ...
【海岛帝国系列赛】No.3 海岛帝国：运输资源
海岛帝国:运输资源 [试题描述] YSF考虑到“药师傅”帝国现在资源极度不平均,于是,商讨启用南水北调工程.YZM为首席工程师.现在,YSF由于工作紧张,准备军用物资和民用物资.但他要时时关注运输工程 ...
SQL 基础语法（创建表空间、用户、并授予权限、数据的增删改查） --（学习笔记）[转]
--创建表空间名:lyayzh_test create tablespace lyayzh_test --创建表数据文件名:lyayzh_test_data.dbf 必须以dbf为后缀 dataf ...
通过进程检测服务时脚本文件名不要起要检测的服务名字命名 shell程序从上到下执行若定义函数或引用系统函数需先定义 kill -USR2
通过进程检测服务时脚本文件名不要起要检测的服务名字命名 kill -USR2 `cat /var/run/mysqld.pid`
Android中Base64的简单使用
服务端图片的信息被转化成字符串,传到android客户端,android端需要把这些信息再解码转化成图片并保存在本地. //编码部分 String string = Base64.encodeToSt ...
Spring的beans标签下可以有其他标签
以前有对xsd(也就是schema文件)小做研究,有个小困惑,就是我们定义的元素只能使用定义的哪一些标签,比如<beans>下面就只能有自定义的哪一些,那为什么在引入<context ...
Nagios监控远端的mysql
工作原理: 利用特定的用户定期访问指定的mysql数据库.当不能访问或连不通时则报警. 1.在生产库上安装nagios插件安装略备注:编译完显示一定要有mysql支持,不然没有chec ...
在Linux下搭建Git服务器的方法是什么样？
第一步安装git:可以通过命令的方式快速安装,不同的linux的安装方法可能不一样,我的是采用的yum方法.ubuntu可以用apt-get命令.sudo yum install git 第二步添 ...

CSS在线字体库，外部字体的引用方法