From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/font-weight/index.html | 368 +++++++++++++++++++++++++++++ 1 file changed, 368 insertions(+) create mode 100644 files/zh-cn/web/css/font-weight/index.html (limited to 'files/zh-cn/web/css/font-weight/index.html') diff --git a/files/zh-cn/web/css/font-weight/index.html b/files/zh-cn/web/css/font-weight/index.html new file mode 100644 index 0000000000..6400488a40 --- /dev/null +++ b/files/zh-cn/web/css/font-weight/index.html @@ -0,0 +1,368 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - CSS Fonts +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

概述

+ +

 {{Cssxref("font-weight")}} CSS 属性指定了字体的粗细程度。 一些字体只提供 normal 和 bold 两种值。

+ +
{{EmbedInteractiveExample("pages/css/font-weight.html")}}
+ +
/* Keyword values */
+font-weight: normal;
+font-weight: bold;
+
+/* Keyword values relative to the parent */
+font-weight: lighter;
+font-weight: bolder;
+
+/* Numeric keyword values */
+font-weight: 1
+font-weight: 100;
+font-weight: 100.6;
+font-weight: 123;
+font-weight: 200;
+font-weight: 300;
+font-weight: 321;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+font-weight: 1000;
+
+/* Global values */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ + + +

{{EmbedLiveSample("font-weight", "100%", 500, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

语法

+ +

值

+ +
+
normal
+
正常粗细。与400等值。
+
bold
+
 加粗。 与700等值。
+
lighter
+
比从父元素继承来的值更细(处在字体可行的粗细值范围内)。
+
bolder
+
比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。
+
<number>
+
一个介于 1 和 1000 (包含) 之间的 <number> 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。一些常用的数值对应于通用的字体重量名称，如章节常见粗细值名称和数值对应所描述。
+
+ +

回退机制

+ +

如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：

+ + + +

以上策略意味着，如果一个字体只有 normal 和 bold 两种粗细值选择，指定粗细值为 100-500 时，实际渲染时将使用 normal，指定粗细值为 600-900 时，实际渲染时将使用 bold 。

+ +

相对粗细值的解析

+ +

当指定的是相对粗细值 lighter 或 bolder 时，将使用如下图表来决定元素渲染时的绝对粗细值：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
继承值（Inherited value）bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

常见粗细值名称和数值对应

+ +

100 到 900 之间的数值大致对应如下的常见粗细值名称：

+ +
+
100
+
Thin (Hairline)
+
200
+
Extra Light (Ultra Light)
+
300
+
Light
+
400
+
Normal
+
500
+
Medium
+
600
+
Semi Bold (Demi Bold)
+
700
+
Bold
+
800
+
Extra Bold (Ultra Bold)
+
900
+
Black (Heavy)
+
+ +

插值规律

+ +

font-weight 数值采取离散式定义（使用 100 的整倍数）。数值为实数，非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，遇到 *50 时，将向上转换，如 150 将转换为 200 。

+ +

正式的语法

+ +
{{csssyntax("font-weight")}}
+ +

例子

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* Set paragraph text to be bold. */
+p {
+  font-weight: bold;
+}
+
+/* Set div text to two steps darker than
+   normal but less than a standard bold. */
+div {
+ font-weight: 600;
+}
+
+/* Sets text enclosed within span tag
+   to be one step lighter than the parent. */
+span {
+  font-weight: lighter;
+}
+ +

结果

+ +

{{EmbedLiveSample("Examples","400","300")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}No change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}Defines font-weight as animatable.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font-weight")}}

-- cgit v1.2.3-54-g00ecf