Question

我有一个小型静态网站，我需要将其移动到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

访问网站时加载字体没有问题

修改

来自控制台的屏幕，看起来像＆＃34;字体＆＃34;文件夹未加载到＆＃34;来源＆＃34;

Console

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

我写错了什么？

Answer 1

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

Answer 2

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

请务必在故障排除指南下面交叉检查：

url（）
如下所示应用Style：身体{ font-family：'MyFont_SerifReg'; //规则中定义的相同名称 }
添加CSS文件的引用，其中规则以HTML格式定义。

通过CSS在本地加载字体

2 个答案: