CSS在线字体库，外部字体的引用方法@font-face

最新推荐文章于 2023-03-13 16:09:08 发布

weixin_33975951

最新推荐文章于 2023-03-13 16:09:08 发布

阅读量1.4k

点赞数 2

原文链接：http://www.cnblogs.com/hellman/p/6773461.html

版权

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，很多朋友问我如何使用，能让自己的页面也支持这样的自定义字体，一句话这些都是@font-face实现的，为了能让更多的朋友知道如何使用他，今天我主要把自己的一点学习过程贴上来和大家分享。

首先我们一起来看看@font-face的语法规则：

   @font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }

取值说明

1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

兼容浏览器

说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体，前面也简单带到了有关字体的几种格式，下面我就分别说一下这个问题，让大家心里有一个概念：

一、TureTpe(.ttf)格式：

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；

五、SVG(.svg)格式：

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

   @font-face {
	font-family: 'YourWebFontName'; src: url('YourWebFontName.eot?') format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }

但为了让各多的浏览器支持，你也可以写成：

   @font-face {
	font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ }

说了这么多空洞的理论知识，大家一定有点心痒痒了，那么我们先来看看W3CPLUS首页中导航部分的兰色字体是如何实现的，假如我们有一个这样的DOM标签，需要应用自定义字体：

HTML Code:

   <h2 class="neuesDemo">Neues Bauen Demo</h2>

通过@font-face来定义自己的Web Font:

  @font-face {
    font-family: 'NeuesBauenDemo'; src: url('../fonts/neues_bauen_demo-webfont.eot'); src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/neues_bauen_demo-webfont.woff') format('woff'), url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'), url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg'); font-weight: normal; font-style: normal; }

我在这里采用的是相对路径，当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到我们实际页面中去：

   h2.neuesDemo {
      font-family: 'NeuesBauenDemo' }

效果：

看到上面的效果，我想大家会感到@font-face很神奇，同时也想争着做做看，可是一动手才发现，特殊字体我要怎样才能得到，那些.eot,.woff,.ttf,.svg这些字体格式又怎么获取呢？有些朋友可能就不知道如何运手了，那么我们就带着这些问题来一个全程完成的实例吧：

一、获取特殊字体：

我们拿下面这种single Malta字体来说吧：

要得到single Malta字体，不外乎两种途径，其一找到付费网站购买字体，其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的，那我们就得到免费的地方下载，在哪有呢？我平时都是到Google Web Fonts和Dafont.com寻找自己需要的字体，当然网上也还有别的下载字体的地方，这个Demo使用的是Dafont.com的Single Malta字体，这样就可以到这里下载Single Malta：

Single Malta下载下来后，需要把它解压缩出来：

二、获取@font-face所需字体格式：

特殊字体已经在你的电脑中了，现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，我们同样是需要第三方工具或者软件来实现，下面我给大家推荐一款我常用的一个工具fontsquirrel,别的先不多说，首跟我点这里进入到下面这个界面吧。

如果你进入页面没有看到上图，你可以直接点击导航:

如果你看到了上面的界面，那就好办了，我们来看如何应用这个工具生成@font-face需要的各种字体，先把我们刚才下载的字体上传上去：

上传后按下图所示操作：

现在从Font Squirrel下载下来的文件已经保存在你本地的电脑上了，接着只要对他进行解压缩，你就能看到文件列表如下所示：

大家可以看到，解压缩出来的文件格式，里面除了@font-face所需要的字体格式外，还带有一个DEMO文件，如果你不清楚的也可以参考下载下来的DEMO文件，我在这里不对DEMO说明问题，我主要是给大家介绍如何把下载下来的文件有价值的运用到我们的项目中。

例如在自己的本地创建了一个fontface项目：

为了让项目结构更清晰，我们在项目中单独创建一个fonts目录，用来放置解压缩出来@font-face所需的字体格式：

现在@font-face所需字体已经加载到本地项目，现在本地项目中的style.css中附上我们需要的@font-face样式

   @font-face {
      font-family: 'SingleMaltaRegular'; src: url('../fonts/singlemalta-webfont.eot'); src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/singlemalta-webfont.woff') format('woff'), url('../fonts/singlemalta-webfont.ttf') format('truetype'), url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg'); font-weight: normal; font-style: normal; }

到这里为止，我们已经通过@font-face自定义好所需的SingleMalta字体，离最后效果只差一步了，就是把自己定义的字体应用到你的Web中的DOM元素上：

   h2.singleMalta {
     font-family: 'SingleMaltaRegular' }

效果：

看到上面的效果，那大家就知道我们实现成功了。那么关于@font-face帮你打造特殊效果的字体，到这里基本上就完成了，我在这里需要提醒使用者：

1、如果你的项目中是英文网站，而且项目中的Logo，Tags等应用到较多的这种特殊字体效果，我建议你不要使用图片效果，而使用@font-face，但是你是中文网站，我觉得还是使用图片比较合适，因为加载英文字体和图片没有多大区别，但是你加载中文字体，那就不一样了，因为中文字体太大了，这样会影响到项目的某些性能的优化；

2、致命的错误，你在@font-face中定义时，文件路径没有载对；

3、你只定义了@font-face，但并没有应用到你的项目中的DOM元素上；

以上几点都是在平时制作中常出现的问题，希望大家能小意一些，另外我们没有办法在购买所有字体，就算你实力雄厚，那也没有办法在一台服务器主机上放置你所有项目需要的字体。因此我给大家提供几个免费字体下载的网址：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你点这里将有更多的免费字体。前面几个链接是帮助你获取一些优美的怪异的特殊字体，但下面这个工具作用更是无穷的大，他能帮你生成@font-face所需要的各种字体，这工具就是Font Squirrel。

最后在提醒一下，使用@font-face别的可以忘了，但Font Squirrel千万不能忘，因为他能帮你生成@font-face所需的各种字体格式。

到此关于@font-face就介绍完了，不知道大家喜欢不喜欢，如果喜欢的话赶快动手实践一下，有Blog的可以马上运用上去，也可以炫一下。

2014年03月更新——@font-face无法在Firefox下正常工作的解决方案，详细的请点击：http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-font-face © w3cplus.com

@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）

<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

转载于:https://www.cnblogs.com/hellman/p/6773461.html

weixin_33975951

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS在线字体库，外部字体的引用方法@font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及...
复制链接

扫一扫