通过 CSS 在本地加载字体答案

【问题标题】：Load font locally via CSS通过 CSS 在本地加载字体
【发布时间】：2017-10-10 20:00:49
【问题描述】：

我有一个小型静态网站，我需要将它移动到 USB 上，以便可以通过这个 USB 打开它。

通过 CSS，我为字体定义了这些规则（是自定义字体）：

@font-face {
  font-family: 'MyFont_SerifReg';
  src: url('/assets/fonts/MyFontSerifReg.ttf') format('truetype');
  src: url('/assets/fonts/MyFontSerifReg.eot'); /* IE9 Compat Modes */
  src: url('/assets/fonts/MyFontSerifReg.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
  src: url('/assets/fonts/MyFontSerifReg.woff') format('woff'); /* Pretty Modern Browsers */
}

@font-face {
  font-family: 'MyFont_SansBol';
  src: url('/assets/fonts/MyFontSansBol.ttf') format('truetype');
  src: url('/assets/fonts/MyFontSansBol.eot'); /* IE9 Compat Modes */
  src: url('/assets/fonts/MyFontSansBol.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
  src: url('/assets/fonts/MyFontSansBol.woff') format('woff'); /* Pretty Modern Browsers */
}

@font-face {
  font-family: 'MyFont_SansLig';
  src: url('/assets/fonts/MyFontSansLig.ttf') format('truetype');
  src: url('/assets/fonts/MyFontSansLig.eot'); /* IE9 Compat Modes */
  src: url('/assets/fonts/MyFontSansLig.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
  src: url('/assets/fonts/MyFontSansLig.woff') format('woff'); /* Pretty Modern Browsers */
}

@font-face {
  font-family: 'MyFont_SansDem';
  src: url('/assets/fonts/MyFontSansDem.ttf') format('truetype');
  src: url('/assets/fonts/MyFontSansDem.eot'); /* IE9 Compat Modes */
  src: url('/assets/fonts/MyFontSansDem.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
  src: url('/assets/fonts/MyFontSansDem.woff') format('woff'); /* Pretty Modern Browsers */
}

body {
  font-family: 'MyFont_SansLig';
}

h2 {
  font-family: 'MyFont_SerifReg';
  font-size: 40px !important;
}

h4 {
  font-family: 'MyFont_SansBol';
  line-height:1.5em;
}

p {
  font-family: 'MyFont_SansLig';
  font-size:16px;
}

b {
  font-family: 'MyFont_SerifReg';
  font-size:18px;
}

我在通过 We 访问网站时加载字体没有问题

编辑：

来自控制台的屏幕，看起来“字体”文件夹未加载到“源”中

Console

只有当我尝试在本地加载网站时才会出现问题：字体未加载。

我写错了什么？

【问题讨论】：

您检查控制台是否有错误？也许找到文件有问题？右键单击，选择“检查元素”，然后单击控制台选项卡。文件位置可能存在错误。
@ReeceKenney 嗨，已经累了，控制台中没有错误：/
你能说出你是如何在你的样式表中使用那个字体的吗？
“让本地访问成为可能” - 这究竟意味着什么？您是否设置了本地 Web 服务器？如果没有，并且您只是通过本地文件系统查看此内容，那么您肯定不想使用以 / 开头的 URL
@ReeceKenney 我编辑了帖子，本地看起来“字体”文件夹没有加载到源中......

标签： css font-face

【解决方案1】：

可能是路径问题。尝试使用相对路径（假设 assets 文件夹与 html 位于同一位置）：../assets/fonts/MyFontSerifReg.ttf

【讨论】：

嗨，也试过这样，但什么都没有......总是同样的问题
把字体文件和html放在同一个地方，用local来加载：@font-face { font-family: 'MyFont_SerifReg'; src: 本地 ('MyFontSerifReg.ttf') 格式('truetype');

【解决方案2】：

   @font-face {
    font-family: 'MyFont_SerifReg';
    src: url('/assets/fonts/MyFontSerifReg.ttf') format('truetype'),
         url('/assets/fonts/MyFontSerifReg.woff') format('woff');
}

请务必反复检查以下故障排除指南：

url() 中提供的路径
应用如下样式，例如：身体{ 字体系列：'MyFont_SerifReg'; // 规则中定义的同名 }
在 HTML 中定义规则的地方添加对 CSS 文件的引用。

【讨论】：