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/index.html | 342 ++++++++++++++++++++++++++++++++++++ 1 file changed, 342 insertions(+) create mode 100644 files/zh-cn/web/css/font/index.html (limited to 'files/zh-cn/web/css/font') diff --git a/files/zh-cn/web/css/font/index.html b/files/zh-cn/web/css/font/index.html new file mode 100644 index 0000000000..6a5b733707 --- /dev/null +++ b/files/zh-cn/web/css/font/index.html @@ -0,0 +1,342 @@ +--- +title: font +slug: Web/CSS/font +translation_of: Web/CSS/font +--- +

{{ CSSRef() }}

+ +

概述

+ +

font 属性可以用来作为 {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} 和 {{ Cssxref("font-family") }} 属性的简写，或将元素的字体设置为系统字体。

+ +

{{EmbedInteractiveExample("pages/css/font.html")}}

+ + + + + +

与任何简写属性一样，任何未指定的值都将设置为其对应的初始值（可能覆盖先前使用非简写属性设置的值）。 虽然不能通过 font 直接设置，但是{{ cssxref("font-stretch") }}，{{ cssxref("font-size-adjust") }} 和 {{ cssxref("font-kerning") }} 也会重置为初始值。

+ +

语法

+ +

可以将font属性指定为单个关键字，它将选择系统字体，或者作为字体相关的属性的简写。

+ +

如果将 font 指定为系统关键字，则它必须是以下之一：caption, icon, menu, message-box, small-caption, status-bar。

+ +

如果 font 字体相关的属性的简写：

+ + + +

值

+ +
+
<'font-style'>
+
见 {{ Cssxref("font-style") }} 属性。
+
<'font-variant'>
+
见 {{ Cssxref("font-variant") }} 属性。
+
<'font-weight'>
+
见 {{ Cssxref("font-weight") }} 属性。
+
<'font-size'>
+
见 {{ Cssxref("font-size") }} 属性。
+
<'line-height'>
+
见 {{ cssxref("line-height") }} 属性。
+
<'font-family'>
+
见 {{ Cssxref("font-family") }} 属性。
+
+

系统字体

+
+
caption
+
用于标题控件（如按钮，下拉列表等）的系统字体。
+
icon
+
用于标签图标的系统字体。
+ +
菜单中（如下拉菜单和菜单列表）使用的系统字体。
+
message-box
+
用于对话框的系统字体。
+
small-caption
+
用于小标题控件的系统字体。
+
status-bar
+
用于窗口状态栏的系统字体。
+
系统关键字前缀
+
浏览器经常会多实现几个带前缀的关键字；Gecko 实现了 -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, 和 -moz-field.
+
+

正式语法

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

示例

+ +
/* Set the font size to 12px and the line height to 14px.
+   Set the font family to sans-serif */
+p { font: 12px/14px sans-serif }
+
+/* Set the font size to 80% of the parent element
+   or default value (if no parent element present).
+   Set the font family to sans-serif */
+p { font: 80% sans-serif }
+
+/* Set the font weight to bold,
+   the font-style to italic,
+   the font size to large,
+   and the font family to serif. */
+p { font: bold italic large serif }
+
+/* Use the same font as the status bar of the window */
+p { font: status-bar }
+ +

实样

+ + + + + + + + + + + + + +

{{ EmbedLiveSample('live_sample','100%', '380px') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS3 Fonts', '#font', 'font') }}{{ Spec2('CSS3 Fonts') }}添加对 font-stretch 的支持
{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight') }}{{ Spec2('CSS2.1') }}添加对关键字的支持
{{ SpecName('CSS1', '#font', 'font') }}{{ Spec2('CSS1') }}初始定义
+ +

浏览器兼容性

+ + + +

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

-- cgit v1.2.3-54-g00ecf