Question

什么是@font-face及font-face如何在css中使用

Answer 1

　　@font-face是什么：
　　@font-face是一个css命令，用来导入服务器端字体，将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。因此本地浏览器浏览网页时，不需要设置字体，就可以查看@font-face设置的任何字体。
　　@font-face在css中使用：
　　@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主要定义字体样式，如斜体。

Answer 2

您好，
为什么它是真棒
就像我说的，@ font-face的打开一个全新的世界。现在，我们能够以一种全新的方式使用排版。这就是为什么你看到这么多独特的网站上的字体排版的网页设计元素和更高的集成度。
此外，作为一个解决方案，展示了自定义字体，使用在图像上的文字可以帮助搜索引擎优化

如何使用@ font-face的
下面的语法是你如何使用@ font-face的。首先，定义新的字体所提供的名称和说明的字体。

复制代码代码如下:
@font-face {
font-family: DeliciousRoman;
src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');
}

然后你引用它。

复制代码代码如下:
p {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

就是这样。
在前面的例子中使用外部来源。但是，如果将字体文件是在您的服务器上，那么你可以参考以下的方式：

复制代码代码如下:
@font-face {
font-family: DeliciousRoman;
src: url('…/Delicious-Roman.otf');
}

此外，还有其他三个字体属性，您应该知道的。首先是font-stretch，您可以设定的字体会被拉伸，“normal’”是默认的。此外，有字体的风格，让你的字体是斜或斜体。最后，还有字体的重量，最后字体为粗体，等你可以自己设置

复制代码代码如下:
@font-face {
font-family: DeliciousRoman;
src: url('…/Delicious-Roman.otf');
font-stretch: condensed;
font-style: oblique;
font-weight: bold;
}

建议
字体渲染是一件棘手的事情 - 尤其是老移动浏览器。你应该总是测试，你可以尽可能多的设备支持。发现问题的速度越快越好。
最后，请记住，使用许多不同的字体可能会减慢你的网站需要时间来加载所有这些字体！

浏览器的兼容性
并非所有的浏览器都支持@ font-face的！
目前，@ font-face的支持

Firefox
Opera
Chrome
Safari
Internet Explorer 9
这是你会说他不支持IE9以下的浏览器吗，不用担心，在旧的浏览器使用@ font-face时，不同的浏览器支持特定的字体文件。
IE浏览器：EOT
Mozilla浏览器：OTF，TTF
Safari浏览器：OTF，TTF，SVG
歌剧：OTF，TTF，SVG
Chrome浏览器：TTF，SVG

@ font-face的资源
Font Squirrel
Font Squirrel是一个很棒的网站，你应该非常熟悉。Font Squirrel是一家集优质商业使用的免费字体供您下载。最重要的是，他们有@ font-face的工具包部分和@ font-face的工具包生成器。Font Squirrel工具包，为您提供不同的字体类型，你需要支持的每一个浏览器。

@ font-face的工具包
Font Squirrel的套件部分是现成的工具包，其中包括多种字体格式，CSS和HTML代码的集合。所有你必须做的是选择一个字体，下载工具包，并复制代码。这是简单，。最重要的是，他们有一个很大的选择充满了巨大的字体。

@ font-face的工具包生成器
另一方面，你有工具包生成器，您上传您自己的字体，它为您提供了所需的所有代码。因为它创造了一个新的工具包为您的字体。所有你必须做的就是下载新的套件，并复制代码到您的网站。它也就是这么简单。然而，当使用自己的字体，请确保您有权利使用它- 不是所有的字体版权允许。

Answer 3

Vue实践-CSS样式position/display/float属性对比使用