Html 使用“较轻”的字体重量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7535934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using 'lighter' weight of a font
提问by butterywombat
I'm trying to use the "Helvetica Light" font, which comes bundled with Helvetica. To do this I read that I had to specify "Helvetica Light" AND font-weight: lighter. I've gotten this to work only by doing this (in SASS):
我正在尝试使用与 Helvetica 捆绑在一起的“Helvetica Light”字体。为此，我读到我必须指定“Helvetica Light”和字体粗细：更轻。我只有通过这样做（在 SASS 中）才能使它起作用：
p
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter
and in other instances,
在其他情况下，
h2.light
font: Helvetica, Arial, sans-serif
font-size: 12px
font-weight: lighter
(or with font-family instead of font)
（或使用字体系列而不是字体）
which is really weird and the only combos that works so far (combining all properties into 'font' doesn't work, and calling the font:as font-family:sometimes doesn't work.
这真的很奇怪，也是迄今为止唯一有效的组合（将所有属性组合到 'font' 中不起作用，有时调用font:asfont-family:也不起作用。
In another rule, I wasn't able to get it to work unless I ONLY had font-weight: lighterwith no font specified (but it inherited Helvetica).
在另一个规则中，除非我font-weight: lighter没有指定字体（但它继承了 Helvetica），否则我无法让它工作。
Now I copied the exact same font styles as the pand put it in an h4and it no longer works. Wtf? What am I doing wrong/why is this so buggy?
现在我复制了与 the 完全相同的字体样式p并将其放入 an 中h4，但它不再起作用。哇？我做错了什么/为什么这有问题？
EDIT: THIS IS NOT A SYNTAX PROBLEM. To the answers below, note that I am using SASS. No semicolons and brackets needed.Also the file I am editing is 5k lines long (a hand me down) and grouped into somewhat organized sections. So I'd like to keep the sections intact until I can refactor it, but then I can't group all the p's and h2.lights together since they are in different sections. Thanks!
编辑：这不是语法问题。对于下面的答案，请注意我使用的是 SASS。不需要分号和括号。此外，我正在编辑的文件有 5000 行长（让我失望），并分组为有组织的部分。所以我想保持部分完整，直到我可以重构它，但是我不能把所有的 p 和 h2.lights 组合在一起，因为它们在不同的部分。谢谢！
采纳答案by butterywombat
what finally worked for me was to have font-family as Helvetica, and font-weight as lighter (but not the condensed format, which doesn't work).
最终对我有用的是字体系列为 Helvetica，字体重量更轻（但不是压缩格式，这不起作用）。
回答by
Try this.
尝试这个。
p
font: 'Helvetica Light', 'Helvetica', Arial, sans-serif
font-size: 12px
font-weight: 100
Just for reference, lighterworks relative to the inherited value. It's better to use absolute values.
仅供参考，较轻的工作相对于继承的值。最好使用绝对值。
回答by sscirrus
Note: this answer was written before the OP specified SASS. It applies to CSS only.
注意：此答案是在 OP 指定 SASS 之前编写的。它仅适用于 CSS。
A couple of things you should do to clean this up:
您应该做几件事来清理它：
Semi-colons
分号
All your CSS rules should end with a semi-colon, such as font-weight:lighter;
你所有的 CSS 规则都应该以分号结尾，比如 font-weight:lighter;
Grouping
分组
As you have 2 identical CSS rules, the fastest and most concise way to do it is this:
由于您有 2 个相同的 CSS 规则，因此最快最简洁的方法是：
p,
h2.light,
other_rules {
font: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: lighter;
}
Then for the one rule where you want a different font,
然后对于你想要不同字体的一个规则，
p{ font: "Helvetica Light", Arial, sans-serif; }
Be sure to put your exceptions belowthe general rules (i.e. in the order I've shown you here) because CSS is implemented in order, and a rule further down the document will take priority.
请务必将您的例外情况置于一般规则之下（即按照我在此处向您展示的顺序），因为 CSS 是按顺序实现的，并且文档更下方的规则将具有优先权。
回答by user2003524
inheritance, establish a base metric typography, so device doesn't crack-up style intersections
继承，建立基本的度量排版，因此设备不会破解样式交叉点
body[role="put something here"] h1, p, etc
body[role="put something here"] h1, p, etc
font-size: 62.5%
Helvetica light, mix with unix-mac-windows-webfont (webfont needs js, may pull you up over edge
Helvetica light，与 unix-mac-windows-webfont 混合（webfont 需要 js，可能会把你拉上边缘
font-family
字体系列
Helvetica Light, Helveticaneue Light, Calibri Light, Helveticaneue, Helvetica, Gill Sans, Myriad Pro, Arial, Lucida Grande, sans-serif
degrade per Meyer, or try just 2 hl, ss... also, check out your mixin
https://github.com/less/less.js/issues/389
按 Meyer 降级，或仅尝试 2 hl、ss ...此外，请查看您的 mixin
https://github.com/less/less.js/issues/389
Sass for Web Designers by Dan Cedarholm and Chris Coyier
Sass for Web Designers by Dan Cedarholm 和 Chris Coyier
回答by Nathan
Try this:
尝试这个：
p, h2.light
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter
