如何在css html中在服务器上的浏览器中设置font-family

Question

我做了一个简单的项目 在其中，我为所有

tags

、

body

和

*

添加了字体 但在

local

一切都是正确的并且运行良好 即使我添加了

font-family

为

important

，但是当项目转到

server

时，字体没有应用

@font-face {
    font-family: iransans;
    src: url('./webFonts/fonts/woff2/IRANSansWeb.woff2') format('woff2');
    src: url('./webFonts/fonts/ttf/IRANSansWeb.ttf') format('ttf');
    src: url('./webFonts/fonts/eot/IRANSansWeb.eot') format('eot');
}

*,
body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: iransans;
}

p,
h1,
h2,
h3,
h4,
h5,
b,
small,
b,
span {
    font-family: iransans !important;
}

Note

：当我检查服务器时，我可以看到我应用的字体 样式部分，但没有应用任何内容，所以这不像我 已经给了字体。也就是说，我现在放的这些代码都在 服务器，但没有效果

确认地址正确性的照片

在控制台中可以看到的警告

Answer 1

您的

@font-face

规则有多个错误。
您需要在

src

属性中添加多种字体格式作为逗号分隔的列表，如下所示：

@font-face {
    font-family: iransans;
    src: url('./webFonts/fonts/woff2/IRANSansWeb.woff2') format('woff2'),
         url('./webFonts/fonts/ttf/IRANSansWeb.ttf') format('truetype')
}

当前您添加了多个

src

属性 – 仅应用最后一个属性，它恰好使用已弃用的

.eot

不受支持（仅限 Internet-Explorer）格式。

这就是您收到错误的原因

“可下载字体：未找到支持的格式...”

我们可以完全删除这个eot。此外，truetypes 的正确格式值是

format(truetype)

- 而不是

ttf