Question

我正处于那个我不知道自己应该编码错误的地方。出于测试目的，我想为我的网站使用本地字体。但我不能让它显示在所有设备上。这是我的代码：

HTML：

 <head>
    some basic stuff ...
    <link rel="stylesheet" href="css/style.css">
    </head>

CSS：

body {
    overflow-x:hidden;

    font-family: 'Circular Std Book', Helvetica, Arial, " sans-serif"!important;
    src: url('CircularStd-Book.eot');
    src: url('CircularStd-Book.eot?#iefix') format('embedded-opentype'),
        url('CircularStd-Book.woff') format('woff'),
        url('CircularStd-Book.ttf') format('truetype'),
        url('CircularStd-Book.svg#CircularStd-Book') format('svg'); 
    }

Example image

它适用于我的台式电脑，但不适用于任何其他电脑...... 谢谢你的帮助。

仍然没有使用这个：

@font-face {
        font-family: 'Circular Std Book', Helvetica, Arial, " sans-serif"!important;
    src: url('../font/CircularStd-Book.eot');
    src: url('../font/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
         url('../font/CircularStd-Book.woff') format('woff'),
         url('../font/CircularStd-Book.ttf') format('truetype'),
         url('../font/CircularStd-Book.svg#CircularStd-Book') format('svg');    
}

body {
    overflow-x:hidden;
    font-family: 'Circular Std Book', Arial, sans-serif;
    }

Answer 1

您的示例似乎缺少@font-face

请在此处查看示例：https://css-tricks.com/snippets/css/using-font-face/

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

另外如上所述，检查路径是否正确。该路径相对于CSS文件本身。

Answer 2

使用！important标记在font-family中定义回退选项会导致此错误。我删除了后备，这是最终的工作代码：

@font-face {
        font-family: 'CircularStdBook';
    src: url('CircularStd-Book.eot');
    src: url('../font/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
         url('../font/CircularStd-Book.woff') format('woff'),
         url('../font/CircularStd-Book.ttf') format('truetype'),
         url('../font/CircularStd-Book.svg#CircularStd-Book') format('svg');    
}

body{
    overflow-x:hidden;
    font-family: 'CircularStdBook', Arial, sans-serif;
    }

感谢您的帮助。

CSS Local Font未显示

2 个答案: