Question

我正在学习如何使@ font-face工作，但它没有正常工作。我已经输入了以下代码，但它不起作用。

 <!DOCTYPE html>
    <html>
      <head>
        <script src="/javascripts/vendor/jquery.js" type="text/javascript"></script>
        <link rel="stylesheet" href="/stylesheets/css.css" type="text/css" />
            <style> 
          @font-face
            {
            font-family: myFirstFont;
            src: url(sansation_light.woff);
            }

            h1
            {
            font-family:myFirstFont;
            }
        </style>

        <title>Hart</title>
      </head>
      <body >
        <h1>Hart</h1>
      </body>
    </html>

Answer 1

首先，将样式放在样式表中，并引用所有浏览器的每种字体类型。

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

请务必通过Font Squirrel运行字体文件：http://www.fontsquirrel.com/tools/webfont-generator。

CSS Tricks有很好的写作。 http://css-tricks.com/snippets/css/using-font-face/

Answer 2

大多数现代浏览器都支持@font-face规则，但并非所有浏览器都采用相同的格式。有一个更全面的@font-face声明，其中包含所有浏览器的所有格式（尽管所有浏览器都显示在Woff方向，包括它们只是为了确保，并且您没有提及浏览器你遇到了问题）

有点像这样

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

参考here

如果您没有其他格式，Font Squirrel等网站可以提供帮助（请尊重字体许可），他们有一个webfont生成器

另一个可能的问题是，确保路径是正确的，与路径所在的文件有关。即，如果它在HTML文件中，路径需要相对于HTML文件，但如果是在外部样式表中，它需要相对于样式表。您当然可以使用绝对路径（即以/开头，以及字体文件的完整路径）。现在根据上面的代码，字体文件（sansation_light.woff）必须与该html文件位于同一目录中。（检查开发人员工具在这里可能会有所帮助，以查看浏览器请求文件的路径。如果失败，您将在文件上获得404）

现在，如果仍然无法解决您的问题，那么可能与您的网络服务器有关。有时它们没有正确设置以提供Font格式（并且您得到404或类似错误，再次检查开发人员工具是否有下载字体文件的错误），因此您可能需要在Web服务器级别为它们添加mimetype支持

Answer 3

要检查的第一件事是路径。您将URL写入字体的方式，它需要与引用它的.html文件位于同一文件夹中。

要检查的第二件事是您实际上已将字体添加到您的网站：）

如何使@ font-face字体起作用

3 个答案: