【新增】使用自己下载的字体的示例： 参考    http://www.w3cplus.com/content/css3-font-face 
@font-face{
　　font-family: "自己的字体名字，可以随便起，可以不和字体文件名相同";
　　src: url('下载的字体路径');
}
注意这样只是把字体定义好了，并没有应用到任何的元素上。只要在任何的html元素上指定font-family:"自己定义的字体名" 即可。
注意：经自己测试，应用自定义字体时，font-family的值只能写自定义的字体名，不能加其他任何的多于字体或者多于字符，否则无法应用自定义字体！
目录：
1：CSS家族五大字体
2:360和谷歌外部字体引用方法
3:谷歌外部字体引用方法详解
4:@font-face用法详解

一： {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）

  1. <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
(family就等字体名称，空格用+号代替)在页面调用
  2. @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 的特性开发的一套优秀的网络字体库。

网络字体的优点有很多：

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

回页首

如何使用 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在线字体库，外部字体的引用方法@font-face相关推荐

  1. CSS 使用 @font-face 引入外部字体

    CSS 使用 @font-face 引入外部字体 下载所需字体到本地 把下载字体文件放入font文件夹里 定义字体 引用字体 结果

  2. 【Vue-Element】矢量字体库iconfont字体图标库使用

    矢量字体库iconfont字体图标库使用 1.注册并登录 2.图标管理 >> 我的项目 >> 新建项目 3.新建完成后,搜索我们想要的图标,然后添加到购物车 4.添加完成后,购 ...

  3. Linux 安装字体库 中文字体

    Linux 安装字体库 & 中文字体 发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效: 如上图可 ...

  4. 本地跑项目正常，部署至云服务器上就出现中文验证码 显示小方块儿；参考文章“Centos7 安装字体库中文字体”才得以解决问题

    一.问题描述 登录页面中文验证码 无法正常显示 只看到小框框,但服务器那边是可以正常输出中文的: 下面这样改了之后还是不行: 二.解决办法:安装字体库&中文字体 1.先查看当前(服务器上)系统 ...

  5. CSS字体：Webfont在线字体与外部字体及操作系统预装字体使用指南

    前言 熟知,从HTML4时代把图标做在一张图上使用css background来提高页面加载速度到"扁平化UI"趋势的到来,再到"手机UI"简洁化设计的大浪潮的 ...

  6. html5 在线字体库,网络字体@font-face，如何处理网页中的特殊字体？

    网络字体@font-face 如何处理网页中的特殊字体 HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑.宋体.黑体已经越来越难以满足设计的需要,那么,如何在网站中使 ...

  7. uniapp微信小程序使用自定义字体和外部字体

    这里主要介绍两个方法: 第一个是引用阿里巴巴字体库,这个方法比较简单,但是字体种类比较少.同时只适用于需要改变的字比较少的情况 第二个是利用腾讯云存储,把自己喜欢的字体下载下来,存储在腾讯云里面,这种 ...

  8. python字体描边_Android为TextView添加字体库和设置描边的方法

    一.使用系统自带的字体 开发Android的人大多都知道,Android里面对字体的支持少得可怜,默认情况下,TextView 的 typeface 属性支持 sans.serif和monospace ...

  9. 增加字库 安卓_Android为TextView添加字体库和设置描边的方法

    一.使用系统自带的字体 开发Android的人大多都知道,Android里面对字体的支持少得可怜,默认情况下,TextView 的 typeface 属性支持 sans.serif和monospace ...

  10. CentOS 7 安装字体库 中文字体

    前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效:    如上图可以看出,不仅没有中文字体,连 ...

最新文章

  1. 如何在golang中关闭bufio.reader_Golang 并发模型系列：1. 轻松入门流水线模型
  2. 前列腺癌检测 AI 算法登上《柳叶刀》：分类性能超过人类专家，还能完成其他临床任务...
  3. Android将数据库数据导出成excel格式的文本（CSV）
  4. Asp.Net微信发布菜单，出现“invalid sub button url domain hint”错误
  5. php querystring使用,node.js中的querystring.parse方法使用说明_node.js
  6. CentOs7.5离线静默安装Oracle12c
  7. 帮肋营销人员建立策略思考能力
  8. Magento网店自定义模板初探（1）——文件夹结构
  9. JavaScript日期对象Date总结（附实例）
  10. 在Ubuntu16.04上安装QQ
  11. 【发布】Bangumi动画搜索一键跳转AniDBMyAnimeListANNTMDB和动漫花园等BT站在线播放站
  12. 8081端口被nexus占用的情况如何解决
  13. 《图解TCP/IP》读书笔记
  14. 一个440MHz的微带线耦合电路
  15. 谷粒商城 - 项目环境搭建
  16. 热乎乎的蚂蚁金服面经分享，offer已到手建议收藏(Java岗、附答案解析)
  17. python艺术画_Python也能绘制艺术画？这里有一个完整教程
  18. 【分享】 [教学]破解完全入门篇
  19. Matlab：查找命令行窗口或历史记录中的文本
  20. Android动画特效第二弹——QQ聊天彩蛋蹦蹦哒

热门文章

  1. ubuntu 8.04玩魔兽争霸
  2. OSI七层模型功能及相关设备
  3. 使用prophet库分析航空出行人次规律
  4. 清理win10不常用服务
  5. 软件工程毕业设计课题（37）基于JAVA毕业设计JAVA核酸预约系统统毕设作品项目
  6. SOEM 源码解析 ecx_LRD
  7. 机器学习之深度学习入门
  8. 码支付如何对接网站_码支付，对接自己的网站教程，再也不怕某些支付平台跑路了...
  9. 两电脑使用网线连接传文件方法
  10. 在计算机储存中读写速度最快的是,储存器中存储速度最快的是哪个