Question

我有一个名为'azonix-webfont.woff'的woff文件。我使用@ font-face将其添加到我的网站。但它不起作用。文本以默认字体显示。错误在哪里？

<head>
    <meta charset="UTF-8">
    <style>
        @font-face
        {
            font-family: Azonix;
            src: url(azonix-webfont.woff);
        }
    </style>
</head>
<body>
      <p style="font-family: Azonix;">Hello!</p>
</body>

以默认字体显示文本。我不知道哪里出问题了。

编辑：好的，我找到了答案。当我将文件发布到服务器时，它开始工作。

Answer 1

您应该将字体上传到transfonter.org并进行转换。将带有transfonter zip文件夹的css代码。然后，根据字体文件的位置，在CSS中更改字体URL。像这样：

@font-face {
  font-family: 'Proxima Nova Cn Lt';
  src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot');
  src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot?#iefix') format('embedded-opentype'),
    url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff2') format('woff2'),
    url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff') format('woff'),
    url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

Answer 2

创建CSS文件： style.css

添加：

@font-face {
    font-family: 'Azonix Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Azonix Regular'), url('azonix-webfont.woff') format('woff');
}

body {
    font-family: 'Azonix Regular';
}

在HTML文件中：

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
      <p>Hello!</p>
</body>

为什么@ font-face无法在我的网站上工作？

2 个答案: