html - 关于自定义字体的困惑

Question

我制作了一个使用 Avenir 字体的网站。看来该字体不适用于 Windows 机器（我在我的 Mac 上开发了这个网站）。

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

我正在使用 CPanel，如果这很重要，那么项目的结构如下：

我有一个包含集合的style.css文件@font-face，并且按照链接的教程全局设置了字体系列。

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

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

很难调试，因为我的计算机上显然已经有 Avenir。@font-face因此，没有所有.woff文件，字体就可以正常显示。除了字体，所有的颜色和间距都从style.css文件中正确渲染；只有字体没有正确显示。

Stack Exchange 向我推荐了这篇文章，但在那篇文章中，问题似乎是一个相对路径问题。我怀疑我的问题的根源是相同的，因为.woff文件位于同一目录中，并且我以两种不同的方式（src: url('font')和src: url('./font')）尝试了 import 语句。

任何建议将不胜感激！

标签： htmlcsscpanelweb-development-server

Answer 1

我在字体定义中没有发现任何问题。您可以在属性中使用localand两者。urlsrc

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

还可以考虑阅读以下问题：

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>