自定义字体font-weight失效及行高设置不生效问题求助

让我来帮你解决这两个CSS问题：

一、字体font-weight被忽略、备用字体只加载Arial的问题 #

问题根源出在你@font-face定义里的字体族名称大小写不一致：第一个@font-face用的是font-family: Gop（大写G），第二个用的是font-family: gop（小写g）。CSS对字体族名称是区分大小写的，浏览器会把它们当成两个完全独立的字体，这就导致：

• 当你给h1设置font:700 1.875rem Gop时，找不到对应700权重的Gop字体，只能直接 fallback到备用字体Arial；
• 备用字体的写法也需要调整，应该把Arial放在自定义字体后面，这样只有当自定义字体加载失败时才会触发备用。

修正后的代码如下：

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

@font-face {
  font-family: Gop; /* 统一字体族名称，和上面保持大小写一致 */
  src: url("../fonts/gop/bold/gop.eot");
  src: url("../fonts/gop/bold/gop.eot?#iefix") format("embedded-opentype"),
       url("../fonts/gop/bold/gop.woff") format("woff"),
       url("../fonts/gop/bold/gop.ttf") format("truetype"),
       url("../fonts/gop/bold/gop.svg#gop") format("svg");
  font-style: normal;
  font-weight: 700;
}

h1 {
  font: 700 1.875rem Gop, Arial; /* 备用字体放在自定义字体之后 */
}

p{
  font: 400 1.875rem Gop, Arial;
}

额外提醒：可以检查下你的bold字体文件本身是否真的对应700权重，部分字体文件可能存在权重标记错误的情况，也会导致浏览器不识别。

二、h1的line-height设置被忽略的问题 #

这个问题主要和CSS优先级、代码顺序或者font简写属性的特性有关：

1. 优先级与顺序冲突：html *选择器的权重是0,0,1,0（元素选择器html + 通配符），h1选择器的权重也是0,0,1,0，优先级相同。如果你的html *样式写在h1样式之后，就会覆盖h1的line-height。
2. font简写的重置特性：font: 700 1.875rem Gop这个简写属性会自动把line-height重置为默认的normal。如果你的line-height:1.5写在font简写之前，就会被覆盖。

解决方案可以选以下任意一种：

• 调整代码顺序：把h1的样式块写在html *的样式块之后，确保后续样式覆盖前面的；
• 在font简写中直接指定行高：这样更简洁，避免单独写line-height的冲突：

  h1 {
    font: 700 1.875rem/1.5 Gop, Arial;
  }
  

• 单独写line-height时放在font简写之后：

  h1 {
    font: 700 1.875rem Gop, Arial;
    line-height: 1.5; /* 必须写在font简写后面 */
  }
  

内容的提问来源于stack exchange，提问作者user3541631