无法使用 @font-face 或 google 字体在网站上显示任何不同的字体答案

【问题标题】：Can't make any different fonts show up on website with @font-face or google fonts无法使用 @font-face 或 google 字体在网站上显示任何不同的字体
【发布时间】：2016-04-22 10:39:42
【问题描述】：

我是网络开发新手，所以请原谅我的无知...

我正在尝试在我的网站上放置自定义字体。我试过用@font-face 和谷歌字体来做，但似乎没有任何效果。

我（希望）在 HTML 文档的顶部链接了 google 字体。还链接了包含“shewalks”字体的 fonts.css。 CSS 文件显示了我如何尝试使用 @font-face 链接字体。

我做错了吗？

Folder Structure

CSS：

@font-face {
     font-family: 'shewalks';
     src: url('./fonts/she_always_walks_alone_demo-webfont.ttf');
     src: url('./fonts/she_always_walks_alone_demo-webfont.woff');
     src: url('./fonts/she_always_walks_alone_demo-webfont.svg');
     src: url('./fonts/she_always_walks_alone_demo-webfont.eot');
     src: url('./fonts/she_always_walks_alone_demo-webfont.woff2');
     }

     a {
         font-family:'pacifico',verdana,arial;
       }


     h2 {

         font-family: 'Pacifico', cursive;

        }

     body {
         text-align: center;
         font-family: 'shewalks';
         }


     header {

         position: fixed;
         background: #ffffff;
         width: 100%;
         z-index: 10;
         position: fixed;
         height: 300px;

         }

html:

<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <link href='https://fonts.googleapis.com/css?family=Pacifico'                   rel='stylesheet' type='text/css'>
         <link rel="stylesheet" type="text/css" href="fonts/fonts.css" />
         <link href="style.css" rel="stylesheet" />



         <title>Me and the Monster</title>  
     </head>

     <body>


         <div id="banner">
             <h2>Me and the Monster</h2>

         </div>

         <div id="content">
    <h2><div style="font-family: 'pacifico', serif;">This should be in 'pacifico' font.</div></h2>

         <p>Content goes here </p>

         <p>Content goes here </p>

</div>

非常感谢您的任何帮助！

【问题讨论】：

您的字体导入 <link href='https://fonts.googleapis.com/css?family=Pacifico' 缺少结束标记。应该是<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

标签： html css fonts

【解决方案1】：

在你的 font.css 中：

src: url('./fonts/she_always_walks_alone_demo-webfont.ttf');

Url 与您的服务器路径无关，而是与 font.css 中的域相关。所以，它应该工作：

src: url('fonts/she_always_walks_alone_demo-webfont.ttf');

您还应该在您的 src 中包含格式，如下所示：

@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 */
}

另外，修复你的 index.html：

<link href='https://fonts.googleapis.com/css?family=Pacifico' />

【讨论】：

【解决方案2】：

如果你走谷歌路线，你的代码应该是这样的：

HTML：

<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

CSS：

body {
  font-family: 'Pacifico', cursive;
}

如果您采用“@import”路线，并且在您自己的服务器上托管字体，您的代码应如下所示：

CSS：

@font-face {
  font-family:"She Always Walk Alone Demo";
    src:url("/fonts/She_Always_Walks_Alone_Demo.eot?") format("eot"),
        url("/fonts/She_Always_Walks_Alone_Demo.woff") format("woff"),
        url("/fonts/She_Always_Walks_Alone_Demo.ttf") format("truetype"),
        url("/fonts/She_Always_Walks_Alone_Demo.svg#SheAlwaysWalkAloneDemo") format("svg");
    font-weight:normal;
    font-style:normal; 
}

body {
  font-family: 'She Always Walk Alone Demo', cursive;
}

【讨论】：