使用“更轻”的字体重量答案

【问题标题】：using 'lighter' weight of a font使用“更轻”的字体重量
【发布时间】：2013-12-12 08:30:49
【问题描述】：

我正在尝试使用与 Helvetica 捆绑在一起的“Helvetica Light”字体。为此，我读到我必须指定“Helvetica Light”和字体粗细：更轻。我只有通过这样做（在 SASS 中）才能让它工作：

  p    
    font: "Helvetica Light", Arial, sans-serif
    font-size: 12px
    font-weight: lighter

在其他情况下，

 h2.light    
    font: Helvetica, Arial, sans-serif
    font-size: 12px
    font-weight: lighter

（或使用 font-family 代替字体）

这真的很奇怪，也是迄今为止唯一有效的组合（将所有属性组合成 'font' 不起作用，并且将 font: 称为 font-family: 有时不起作用。

在另一条规则中，除非我只有 font-weight: lighter 没有指定字体（但它继承了 Helvetica），否则我无法让它工作。

现在我复制了与p 完全相同的字体样式并将其放入h4 中，但它不再有效。什么？我在做什么错/为什么会这么麻烦？

编辑：这不是语法问题。对于下面的答案，请注意我使用的是 SASS。不需要分号和括号。我正在编辑的文件也有 5k 行长（递给我），并分组为一些有组织的部分。所以我想保持这些部分完整，直到我可以重构它，但是我不能将所有 p 和 h2.lights 组合在一起，因为它们位于不同的部分。谢谢！

【问题讨论】：

标签： html css sass

【解决方案1】：

试试这个。

p
  font: 'Helvetica Light', 'Helvetica', Arial, sans-serif
  font-size: 12px
  font-weight: 100

仅供参考，lighter 相对于继承的值起作用。最好使用绝对值。

【讨论】：

【解决方案2】：

最终对我有用的是将 font-family 设置为 Helvetica，将 font-weight 设置为更轻（但不是精简格式，这不起作用）。

【讨论】：

【解决方案3】：

你应该做几件事来清理它：

您的所有 CSS 规则都应以分号结尾，例如 font-weight:lighter;

由于您有 2 条相同的 CSS 规则，因此最快、最简洁的方法是：

p, 
h2.light,
other_rules {
  font: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: lighter;
}

那么对于一个你想要不同字体的规则，

p{ font: "Helvetica Light", Arial, sans-serif; }

请务必将您的例外情况置于一般规则之下（即按照我在此处向您展示的顺序），因为 CSS 是按顺序实施的，文档后面的规则将具有优先权。

【讨论】：

【解决方案4】：

试试这个：

  p, h2.light
    font: "Helvetica Light", Arial, sans-serif
    font-size: 12px
    font-weight: lighter

【讨论】：

【解决方案5】：

继承，建立一个基本的公制字体，这样设备就不会破坏样式的交叉点

body[role="put something here"] h1, p, etc

font-size: 62.5%

Helvetica light，与 unix-mac-windows-webfont 混合（webfont 需要 js，可能会把你拉到边缘

字体系列

Helvetica Light, Helveticaneue Light, Calibri Light,  Helveticaneue, Helvetica, Gill Sans, Myriad Pro, Arial, Lucida Grande, sans-serif

按照 Meyer 进行降级，或者只尝试 2 hl、ss...另外，请查看您的 mixin
https://github.com/less/less.js/issues/389

Dan Cedarholm 和 Chris Coyier 为网页设计师设计的 Sass

【讨论】：