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

Question

如题所述

Answer 1

@ font-face的是一个CSS规则，允许你输入自己的字体出现在网站上，即使在特定的字体在访问者的计算机上没有安装。这条规则最重要的是，它为设计师打开了一个全新的世界。您可以使用任何你喜欢的字体。

下面的语法是你如何使用@ 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;
}

建议：

字体渲染是一件棘手的事情 - 尤其是老移动浏览器。你应该总是测试，你可以尽可能多的设备支持。发现问题的速度越快越好。

最后，请记住，使用许多不同的字体可能会减慢你的网站需要时间来加载所有这些字体！

望采纳！

Answer 2

它的作用是让你可以使用指定的字体在网页中使用，而不是使用默认的字体，先在样式表里面添加它，然后在html里面声明。

Answer 3

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