Question

尝试在我的网站上使用 ubuntu 字体，所以我做了以下操作：

从Google fonts下载字体
创建了一个包含以下内容的文件 static/fonts/ubuntu.woff/ubuntu.css：

/* cyrillic-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://localhost:8090/static/fonts/ubuntu.woff/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://localhost:8090/static/fonts/ubuntu.woff/4iCs6KVjbNBYlgoKew72j00.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://localhost:8090/static/fonts/ubuntu.woff/4iCs6KVjbNBYlgoKcw72j00.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://localhost:8090/static/fonts/ubuntu.woff/4iCs6KVjbNBYlgoKfA72j00.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://localhost:8090/static/fonts/ubuntu.woff/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://localhost:8090/staticfonts/ubuntu.woff/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

从我的 html 文件中调用它为：

<link href="http://localhost:8090/static/fonts/ubuntu.woff/ubuntu.css" rel="stylesheet">
<style>
  body {
      font-family: Ubuntu, "times new roman", times, roman, serif;
      color: white; /* Text color */
      background-color: #772953; /* Used if the image is unavailable */
      height: 500px; /* You must set a specified height */
      background-position: center; /* Center the image */
      background-repeat: no-repeat; /* Do not repeat the image */
      background-size: cover; /* Resize the background image to cover the entire container */
  }
</style>

在我的 html body 中，我有：

<html dir="ltr" lang="en">
<h1>Bayan Request form </h1>

<form method="POST">
  <fieldset>
    <legend>Bayan Info </legend>
    <table>
      <tr>
        <td><label>Bayan number</label></td>
        <td><input type="text" name="email"></td>
        <td><label>Bayan date</label></td>
        <td><input type="date" id="birthday" name="birthday"></td>
      </tr>
      <tr>
        <td><label></label>Shipment reference</label></td>
        <td><input type="text" name="subject"></td>
        <td><label>SADAD number</label></td>
        <td><input type="text" name="subject"></td>
    </tr>
  </table>
  </fieldset>
  ...

但字体显示看起来是标准字体，不是我想要的！

Answer 1

感谢 chingucoding 的评论，通过检查 network tab，我发现 WOFF 文件未正确解码，并且消息告诉 (index):1 Failed to decode downloaded font: http://localhost:8090/staticfonts/ubuntu.woff/4iCs6KVjbNBYlgoKfw72.woff2，我注意到其中缺少 {{ 1}} 介于 / 和 static 之间，所以我写错了 fonts 而不是 staticfonts 我修复了它，现在工作正常。

字体未按预期显示

1 个答案: