关于自定义字体的困惑

Question

我制作了一个使用 Avenir font-face 的网站。该字体似乎不适用于 windows 机器（我在 Mac 上开发了这个网站）。

我的问题是，根据 this 教程，我希望字体能够正确加载。到目前为止，Avenir 字体在我的 Mac 上显示正常，但我有一个单独的联系人告诉我为他的机器（显然是 windows 机器）加载的字体是默认的 Times New Roman 字体。

我正在使用 CPanel，如果这很重要的话，这里是项目的结构：

我有一个 style.css 文件，其中设置了 @font-face，并且根据链接教程全局设置了字体系列。

在 CPanel 上，我将 style.css 和 .woff 文件上传到同一根目录，在文件管理器 > public_html 下。我的项目结构如下所示：

这是否意味着我的 CSS 文件无法找到 .woff 文件？或者这会是 CPanel 的问题吗？

很难调试，因为我的电脑上显然已经安装了 Avenir。因此，字体在没有 @font-face 和所有 .woff 文件的情况下显示得很好。除字体外，style.css 文件中的所有颜色和间距均正确呈现；只是字体显示不正确。

Stack Exchange 向我推荐了 this post，但 post 问题似乎是相对路径问题。我怀疑我的问题的来源是否相同，因为 .woff 文件位于同一目录中，并且我尝试了两种不同的导入语句（src: url('font') 和 src: url('./font')）。

如有任何建议，我们将不胜感激！

Answer 1

我没有发现字体定义有任何问题。您可以在 src 属性.

中同时使用 local 和 url

尝试在 src 的 url 参数中给出完整的 url 字体文件。

同时考虑阅读以下问题：

Avenir Next Pro 的 Google Webfonts 或 Typekit 替代品是什么？ https://graphicdesign.stackexchange.com/questions/16036/what-are-google-webfonts-or-typekit-alternatives-to-avenir-next-pro

我使用了这里的 css：https://fonts.googleapis.com/css?family=Nunito&display=swap 下面的演示。

希望对您有所帮助。

h1 {
font-size: 50px;
font-family: 'Nunito';
}

/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIOOaBTMnFcQIG.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: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIMeaBTMnFcQIG.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIOuaBTMnFcQIG.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIO-aBTMnFcQIG.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: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofINeaBTMnFcQ.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;
}

<h1>This is Nunito Font</h1>

关于自定义字体的困惑

Confusion Regarding Custom Font Face

html

css

cpanel

web-development-server