输出中的字体系列没有变化

Question

在 < h1 > 标记中，当我更改任何文本块（或分区）的任何字体系列并在浏览器中打开它时，字体系列不会更改。我应用它的 h1 中根本没有任何变化。

以下是我的 HTML 代码：

<h1 align="center" class="login">      
           LOG IN</h1><hr /><br />

这是我的 CSS 代码：

.login
{
    color:Black;
    font-family:Calibri;
    font-size:xx-large;
    font-weight: bold;

}

我得到的输出如下：

我也将字体更改为 Calibri。但是，没有反映出任何变化。输出始终显示相同的字体系列。我不明白，问题可能出在哪里？

Answer 1

检查您的个人样式 css 文件中的 @font-face 规则。你应该像这样添加你的字体：

@font-face {
  font-family: "font name";
  src: url(font path/font name.eot);
  src: url(font path/font name.eot?#iefix) format('embedded- 
  opentype'),
   url(font path/font name.woff) format('woff'),
   url(font path/font name.ttf) format('truetype'),
   url(font path/font name.svg#font name) format('svg');
   font-weight: normal;
   font-style: normal
 }

并将您的字体名称写在 font-family 前面，并将格式写在双引号或单引号中，例如“Calibri”或“Calibri”和“svg”或“svg”，其他类型的引号会导致字体无法正确更改（当您将 @font-face 规则的代码从某些网站复制并粘贴到编辑器时，您可以看到引用的形状有所不同）。

并检查你的路径，你应该用正斜杠（/）分隔它，例如“my project/fonts/Calibri.woff2”。

使用不同的格式在不同的浏览器中正确显示字体。“eot”格式适用于 IE8 及以下版本，“ttf”适用于旧浏览器，尤其是移动设备，“SVG”适用于旧浏览器，“woff”和“woff2”适用于所有现代浏览器，如果您没有它们，您可以在“transfonter.com”中转换字体。