【问题标题】：Font family does not change in the output字体系列在输出中没有改变
【发布时间】：2020-11-10 19:34:14
【问题描述】：

在

标记中，当我更改任何文本块（或分区）的任何字体系列并在浏览器中打开它时，字体系列不会改变。我应用的 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。但是，没有反映任何变化。输出始终显示相同的字体系列。我不明白，问题可能出在哪里？

【问题讨论】：

您是否定义了@font-face 添加的字体系列？
尝试使用另一种字体，如果它不起作用，您可能有其他 css 规则优先于这个并推翻它。你能链接到重新创建这个的 jsFiddle 吗？
你可以试试"font-family:"Times New Roman",Times,serif;"看看它是否有效？我怀疑你的 css 文件中有一个覆盖。
是的，我尝试使用 times new roman 和其他字体而不是 calibiri，但它不起作用
@RanaMuhammadUsman 我是怎么定义的？

标签： html css fonts

【解决方案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”中转换你的字体。

【讨论】：

【解决方案2】：

首先定义你的字体

@font-face{
   font-family:My Font; 
   src: url(fonts/myfont.ttf)
 }


h1{font-family:"My Font"}

【讨论】：

在你的 CSS 中，是的。在最顶端
创建一个名为“fonts”的文件夹，从网上下载字体（他的扩展名是.ttf），放到那个文件夹中

【解决方案3】：

您应该首先使用普通的网络安全字体（如“Arial”）测试您的规则，这是网络安全字体的列表： http://www.w3schools.com/cssref/css_websafe_fonts.asp

如果可行，那么问题可能就像 Rana 提出的那样，您应该添加一个字体定义规则： http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

如果正常的网络安全字体仍然不起作用，您可能有另一条更强大的规则覆盖了这条规则。您可以通过在浏览器中检查该元素（Chrome 的 devtools 最适合此）并查看您的规则并查看它是否作为一条打击它的线（意味着它未使用并且浏览器忽略它）来检查，像这样（只是你的规则而不是背景位置规则）：

另外，一个简单的测试方法是尝试将!important 关键字添加到上述规则中，使其优先级高于其他规则。

.login {
    color: Black;
    font-family: Arial !important;
    font-size: xx-large;
    font-weight: bold;

}

所以它在 Chrome 的 devtools 中看起来像这样：

您可以在此处找到有关此关键字和 css 实现的整个级联优先系统的更多信息： http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

（图片取自this blog post:)

【讨论】：

【解决方案4】：

如果您使用的是较新的 PC 或 MAC，Calibri 字体应该可以工作。

如果@font-face 不起作用，肯定有一些代码覆盖了h1 样式。

尝试定位是否有其他东西覆盖了样式。

否则，请尝试将您的 .login 重命名为：h1.login：

所以不是：

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

}

用途：

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

}

【讨论】：

不完全正确，尤其是在比 Vista 更早的 Mac 和 Windows 上，并非所有机器都支持 Calibri 作为其办公字体。cssfontstack.com
但是 h1 不是项目中的一个，我在很多地方都使用 h1，所以当我使用这种方式时..h1 将所有 h1 放置在这种风格，但我只想要特别不是所有在 h1 所在的地方

【解决方案5】：

输入“Calibri”

p {
font-family: 'calibri';
}

&lt;p&gt;hello this is calibri&lt;/p&gt;

【讨论】：