怎么使用CSS3嵌入Web字体

本篇内容主要讲解“怎么使用CSS3嵌入Web字体”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用CSS3嵌入Web字体”吧!

CSS3嵌入Web字体

一直以来Web设计师在设计网页时都想为Web页面添加一些优雅的字体，但浏览器仅限于使用用户在其系统上安装的字体呈现文本，这样一来让大部分网站受限于字体数量的不足。多年来一直都是使用图片替换文本的方式来解决页面上使用优雅字体，但这种对于频繁更换文本的网站来说是一件不切实际的事，以致于我们坚持使用这些少量的Web字体。随着技术的不断发展，出现在Web页面中 使用Flash和JavaScript技术来弥补这一不足。虽然这些方法已经是不错的应急措施， 允许包含自己的字体，但是它们拥有很严重的缺陷。有时候它们很难实现，因为它们要求用户在本地启用 JavaScript或者 Flash插件。值得庆幸的一件事情是， 可以使用@font-face模块来解决Web页面中使用优雅字体的方式。 

@font-face模块介绍：

@font-face主要是把自己定义的Web字体嵌入到Web页面中，这些自定义的字体被放置在服务器上，浏览器会根据指定的命令将对应的字体下载到本地缓存， 使用它来修饰文本。也常常把这种方式 称为Web字体嵌入（实际上并没有什么字体被嵌入）。

@font-face语法：

有了@font-face模块， 只要将字体传入到服务器端，不管用户端是否安装了对应的字体， 设计的网页都能够正确显示，用较为专业的话来讲，@font-face能够加载服务器端的字体， 让客户端浏览器 显示客户端没有安装的字体。 如果没有@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:' YourWebFont-Name'”。 

2. Soure： 指定的是自定义的字体存放路径，可以是相对路径也可以是绝对路径。 

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

4. font-weight和font-style： 前者用来指定字体是否为粗体，后者主要定义字体样式，如斜体。除了这两个属性之外， 类似的属性还有 font-variant、 font- size、 font-stretch 等。

使用字体图标的优势：

http:/ /www.iis7.com/b/wzjk/

使用字体图标和位图， 它自身更具有哪些优势呢？ 

1. 适用性： 一个图标字体比一系列的图像（特别是在Retina屏中使用双倍大小的图像）要小。一旦图标字体加载了，图标就会马上渲染出来， 不需要下载任何图像。 

2. 可扩展性： 图标字体可以用过font-size属性设置大小。 能够随时输出不同大小的图标，然而，使用位图必须为每个不同大小的图像输出一个不同文件。 

3. 灵活性： 文字效果可以很容易地应用到图标上，包括颜色、阴影和翻转等效果。它们还可以在任何背景下显示。

4. 兼容性： 网页字体支持所有现代浏览器，包括低版本IE。

实现@font-face：

@font-face属性和CSS3中的@media，@import、@keyframes等属性一样， 都是用关键字符“@” 封装多项规则。@font- face的"@"规则主要用于指定自定义字体， 然后在其他样式块中调用@ font-face中自定义的字体。

使用@font-face自定义字体 

正常使用@font-face自定义字体， 必须满足以下几个关键点： 

1. 将各种格式字体上传到服务器上， 以支持各种浏览器； 

2. 在@font-face中显式指定自定义字体名称以及引用自定义字体的字体来源。

font-family和src都是必需的，通过font-family来自定义字体，而src是引用自定义字体的来源。当然，除了这两个属性之外，还可以在@font-face显式地通过字体相关属性设置文本样式，如font- weight、font-style 等。

@font-face规则中的font-family与其他样式中的font-fmaily略有不同。在@font-face中的font-family只是声明了字体的名称（也就是自定义了字体的名称），而没有向元素中分配这种字体。而样式中的font-family却是显式地为元素指定字体名称。在@font-face规则中，通过font-family来自定义字体名称，而这个自体名称可以是任意的名称或形式，它仅用于元素样式中的font-family属性引用。 当然，使用的字体名称最好与引用的字体文件名相同，用于保持CSS的可读性，可维护性。上面通过@font-face声明了字体名“NeuesBauenDemo”，但并不会有任何实际效果，如果想让Web中的文本字体是NeuesBauenDemo，需要在样式代码块中的对应元素中引用@font-face定义好的字体，@font-face和@keyframes一样，一个@font-face规则仅自定义一个字体， 如果需要自定义多个 字体就需要对应启用多个@font-face规则，

声明字体来源：

@font-face规则中有一个非常重要的参数，就是src，这个属性类似于img标签中的src属性，其值主要是用于链接到实际的字体文件。此外，可以声明多个来源，如果客户端的浏览器未能找到第一个 来源，它会依次尝试寻找后面字体来源，直到找到一个可用的字体来源为止，每种字体都有其具体作用和格式，

1. TureType(. ttf) 格式 TureType(. ttf) 格式字体是 Windows 和 iOS 的最常见的字体， 是 一种RAW格式。  

2. OpenType(. otf) 格式 OpenType(. otf) 格式字体被认为是一种原始的字体格式， 其内置在TureType的基础上， 所以也提供更多的功能，  

3. Web Open Font Format(. woff) 格式 Web Open Font Format(. woff) 格式字体是Web字体中最佳格式， 它是一个开放的 TrueType/ OpenType 的压缩版本， 同时也支持元数据包的分离

4. Embedded Open Type(. eot) 格式 Embedded Open Type(. eot) 格式字体是 IE专用字体， 可以从 TrueType 中创建此格式字体

5. SVG(. svg) 格式SVG(. svg) 格式字体是基于SVG字体渲染的一种格式， 

这就意味着在@font-face中至少需要“. woff”和“. eot”两种格式字体， 甚至还需要“. svg” 等字体以得到更多种浏览版本的支持。 为了使@font-face 得到更多的浏览器支持， Paul Irish 写了 一个独特的@font-face语法叫做“ Bulletproof@ font- face”(防弹字体)

创建各种字体：

手上仅有一种格式的字体，而为了兼容浏览器各版本，需要从一种格式字体转换成所需的各种字体格式。那么如何将字体转换为所有格式的字体呢？ 

这将成为@font-face定义字体之前首要解决的问题之一。目前为止，在互联网上有很多在线转换字体的生成工具。 

-Fontsquirrel 字体转换生成器 

-Codeandmore 字体转换生成器 

创建一个图标字体：

Symbol(符号)字体可以使用一个专用的字体创建应用程序， 比如说 Glyphs(雕文)，但是一个专业的排版工具之外的需求或要求构建一个简单的图标字体，比如说 间中攻粗细这样的物理关系并不是非常重要。目前为止，最简单的方法是使用Keyamoon制作的一个Web应用程序IcoMoon，可以解决字符转换成Web字体的所有麻烦。IcoMoon附带了大量的图标， 可以通过图标库添加更多的图标，其中 大部分都可以免费使用（使用时请先查看它们的许可证）。如果你正在寻找如“ 文件下载”和“ 购物车” 一样的图标，那么你会发现， 使用标准的图标比你自己创建要方便得多。

准备插图：

首先，需要能创建矢量图标的程序，并且能够找到输出SVG格式，比如Illustrator或者iNkscape。 设计的时候，可以使用任何你喜欢的颜色，但是图标必须是一个纯色。确保每个图标的尺寸大小是相同的。若某一个图标相较其他的更高或者更宽，会导致很难创建一个一致的字体。在这里，我们不得不减少飞艇图标的宽度，以使它能匹配其他图标

1. 清理图标

仔细检查每一个图标，以确保它们没有缺陷—图标在小尺寸的时候可能看着是完美的，当放大后会发现一些小的缺陷。在(AI)Illustrator中，使用Pathfinder工具统一层叠元素， 减去前面元素， 比如图标 中的星星图标。 原则是确保图标是可读的小尺寸。

2. 导成SVG文件

现在，选择一个图标并将它复制粘贴到一个新的文档场景中（如200px*200px）。会发现它有一个基线尺寸的设置。使用彩色的图标，比如说在白色的背景中使用黑色的图标。现在，选择菜单“文件”中“保存”，将选择将文件保存成SVG文件格式。使用默认的SVG设置。一旦这样做，所有的图标可以创建为一个Web字体。

3. 导入到 IcoMoon

打开 IcoMoon Web App 。导入一个图标，点击“ Import icons”按钮，然后选择想要添加的SVG文件— 可以一次添加多个文件。 这些图标将会出现在“ Your Custom Icons” 区域中。 如果它们 是高亮的黄色显示，表示这些图标是将要创建的图标字体。

4. 从IcoMoon中导出字体

想调整图标的位置、大小或旋转，可以点击“ Edit” 按钮， 使用“ Save Copy” 保存图片（ 如镜像图标）。 然后添加一个有意义的图标标记， 将用来生成类 名。 都准备好了， 点击屏幕底部的“ Font” 按钮开始生成字体。 这样就可以指定图标映射到字符上，例如， 设置一套六个旋转的球， 可以给这六个球分别指定字符 q、 w、 e、 r、 t 和 y。 也可以根据自己的爱好选择一个字体的名字。

5.下载字体文件

单击“ Download”下载字体包到电脑上。它有一个文件夹包含了字体本身（ woff、 eot、 ttf 格式），以及一个HTML示例页面和相应的CSS。甚至还有一个 JavaScript 文件和 一个解决方法，如果 需要支持IE或 IE7， 将font文件 复制到网 站， 为项目添加字体。 需要从 style. css 文件中复制 CSS 样式， 并粘贴到自己网站的CSS文件中， 但是可以要将它重命名为 fonts. css， 并保持它作为一个 单独 的 CSS 文件。 需要 的 时候 再把 这个 CSS 文件 引入 到 HTML 中。<linkrel="stylesheet"href="fonts.css"/>在CSS文件中可以找到@font-face需要将URL路径修改成本地的相对路径，或者可以简单地把字体文件和样式放在同一个文件夹。

调用字体样式：

文件 index. html，有两种方法可以调用， 

一种是通过字符（unicod 或 名称），

另一种是通过类名。首先，使用HTML5的自定义属性data- icon。

第二种方法

使用 一个span元素。 <span aria-hidden="true"></span> 如果想让图标具有链接功能， 可以将其放在一个链接中。< a href=" http:// www. w3cplus. com" data-icon="&# x73;"></ a> 这里，添加一个 iconlink类名， 并设置一个悬浮效果。

到此，相信大家对“怎么使用CSS3嵌入Web字体”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！