字体系列在输出中不会改变

Question

＆lt; h1＆gt;标记，当我更改任何文本块（或分区）的任何字体系列，并在浏览器中打开它时，font-family不会更改。在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”中转换字体。

Answer 2

首先定义字体

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


h1{font-family:"My Font"}

Answer 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 :)

Answer 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;

}

Answer 5

输入“ Calibri”

p {
font-family: 'calibri';
}

<p>hello this is calibri</p>