From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../learn/css/styling_text/fundamentals/index.html | 727 +++++++++++++++++++++ 1 file changed, 727 insertions(+) create mode 100644 files/zh-cn/learn/css/styling_text/fundamentals/index.html (limited to 'files/zh-cn/learn/css/styling_text/fundamentals') diff --git a/files/zh-cn/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..45660a9532 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,727 @@ +--- +title: 基本文本和字体样式 +slug: Learn/CSS/为文本添加样式/Fundamentals +tags: + - 初学者 + - 对齐 + - 文本 + - 样式 + - 间距 +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

在这篇文章中，我们将带你开始掌握 {{glossary("CSS")}} 的文字样式的旅程。这里我们将详细介绍文本/字体样式的所有基本原理，包括设置文字的粗细，字体和样式，文字的属性简写，文字的对齐，和其他效果，以及行和字母间距。

+ + + + + + + + + + + + +
先决条件：基本的电脑操作，HTML 基础 (学习 Introduction to HTML)，CSS 基础 (学习 Introduction to CSS).
目的:了解在网页上设计文本所需的基本属性和技术。
+ +

CSS中的文字样式涉及什么？

+ +

正如你已经在你使用 HTML 和 CSS 完成工作时所经历的一样，元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，你可以使用 {{htmlelement("br")}} 元素。

+ +
+

注意: 如果上面的段落让你感到困惑，没关系，在继续之前，可以重新看看我们的 Box model 文件，复习框模型的理论。

+
+ +

用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。

+ + + +
+

注意: 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( {{htmlelement("span")}} 或者 {{htmlelement("strong")}}), 或者使用伪元素，像::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

+
+ +

字体

+ +

我们直接来看看样式字体的属性。在这个例子中，我们会在一个相同的 HTML 示例中应用一些不同的 CSS 属性，就像这样：

+ +
<h1>Tommy the cat</h1>
+
+<p>I remember as if it were a meal ago...</p>
+
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.</p>
+ +

你可以在这找到完成版本 finished example on Github (也可以看源码 the source code.)

+ +

颜色

+ +

{{cssxref("color")}} 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 {{cssxref("text-decoration")}} 属性放置在文本下方或上方的线 (underline overline)。

+ +

color 也可以接受任何合法的 CSS 颜色单位, 比如:

+ +
p {
+  color: red;
+}
+ +

这将导致段落变为红色，而不是标准的浏览器默认的黑色，如下所示：

+ + + +

{{ EmbedLiveSample('颜色', '100%', 220) }}

+ +

字体种类

+ +

要在你的文本上设置一个不同的字体，你可以使用 {{cssxref("font-family")}}  属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 {{anch("Default fonts", "default font")}}. 下面是一个简单的例子:

+ +
p {
+  font-family: arial;
+}
+ +

这段语句使所有在页面上的段落都采用 arial 字体，这个字体可在任何电脑上找到。

+ +

网页安全字体

+ +

说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体。

+ +

大多数时候，作为网页开发者，我们希望对用于显示我们的文本内容的字体有更具体的控制。问题在于，需要一个方法来知道当前正在浏览我们的网站网页的电脑，它有哪些可用字体。我们并不是总能在每种情况下都知道这一点，但是网络安全字体在几乎所有最常用的操作系统（Windows，Mac，最常见的Linux发行版，Android和iOS版本）中都可用。

+ +

实际的Web安全字体列表将随着操作系统的发展而改变，但是可以认为下面的字体是网页安全的，至少对于现在来说 (它们中的许多都非常流行，这要感谢微软在90年代末和21世纪初期的倡议Core fonts for the Web )：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
字体名称泛型注意
Arialsans-serif通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。
Courier Newmonospace某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。
Georgiaserif
Times New Romanserif某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。
Trebuchet MSsans-serif您应该小心使用这种字体——它在移动操作系统上并不广泛。
Verdanasans-serif
+ +
+

注意: 在各种资源中，cssfontstack.com 网站维护了一个可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表，这可以帮助决策网站的安全性。

+
+ +
+

注意: 有一个可以下载来自一个网页的自定义字体的方法，允许你通过任何你想要的方法来定制你使用的字体：网页字体。这个有一点复杂，我们将在这个模块中的另一篇文章中讨论这一点。

+
+ +

默认字体

+ +

CSS 定义了 5 个常用的字体名称:  serif, sans-serif, monospace, cursive,和 fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况，浏览器会尽力提供一个看上去合适的字体。 serif, sans-serif 和 monospace 是比较好预测的，默认的情况应该比较合理，另一方面，cursive 和 fantasy 是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。

+ +

五个名称定义如下：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名称定义示例
serif有衬线的字体 （衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）My big red elephant
sans-serif没有衬线的字体。My big red elephant
monospace每个字符具有相同宽度的字体，通常用于代码列表。My big red elephant
cursive用于模拟笔迹的字体，具有流动的连接笔画。My big red elephant
fantasy用来装饰的字体My big red elephant
+ +

字体栈

+ +

由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个字体栈 (font stack)，这样的话，浏览器就有多种字体可以选择了。只需包含一个font-family属性，其值由几个用逗号分离的字体名称组成。比如

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。

+ +

在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是Time New Roman - 这对于 sans-serif 字体是不利的！

+ +
+

注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。

+
+ +

一个使用 font-family 的例子

+ +

让我们把它添加到之前的例子上，给段落一个 sans-serif 的字体。

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

这给我们以下结果：

+ + + +

{{ EmbedLiveSample('一个使用_font-family_的例子', '100%', 220) }}

+ +

字体大小

+ +

在我们之前的模块中的CSS values and units 文章，我们回顾了length and size units. 字体大小 (通过 {{cssxref("font-size")}} 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 percentages)，然而你在调整字体大小时，最常用的单位是：

+ + + +

元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——{{htmlelement("html")}}开始，浏览器的 font-size 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值：16px。其他元素也许有默认的大小，比如 {{htmlelement("h1")}} 元素有一个 2em 的默认值，所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时，事情会变得棘手。比如，如果你有一个 {{htmlelement("article")}} 元素在你的页面上，然后设置它的 font-size 为 1.5em (通过计算，可以得到大小为 24px)，然后想让 <article> 元素中的段落获得一个计算值为 20px 的大小，那么你应该使用多少 em。

+ +
<!-- document base font-size is 16px -->
+<article> <!-- If my font-size is 1.5em -->
+  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
+</article>
+ +

你需要将 em 的值设置为 20/24, 或者 0.83333333em. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rem 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。

+ +

一个简单的 size 示例

+ +

当调整你的文本大小时，将文档(document)的基础  font-size 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意，这样它们就可以很容易被找到。

+ +

我们的新结果是这样的:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('字体大小', '100%', 220) }}

+ +

字体样式，字体粗细，文本转换和文本装饰

+ +

CSS 提供了 4 种常用的属性来改变文本的样子：

+ + + +

我们来看一下这几个属性添加到我们的例子中：

+ +

我们的新结果是这样的：

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('字体样式，字体粗细，文本转换和文本装饰', '100%', 220) }}

+ +

文字阴影

+ +

你可以为你的文本应用阴影，使用 {{cssxref("text-shadow")}} 属性。这最多需要 4 个值，如下例所示：

+ +
text-shadow: 4px 4px 5px red;
+ +

4 个属性如下:

+ +
    +
  1. 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的。这个值必须指定。
    2. +
  2. 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。
    3. +
  3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位 length and size units.
    4. +
  4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为 black.
    5. +
+ +
+

注意: 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 -1px -1px.

+
+ +

多种阴影

+ +

您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：

+ +
text-shadow: -1px -1px 1px #aaa,
+             0px 4px 1px rgba(0,0,0,0.5),
+             4px 4px 5px rgba(0,0,0,0.7),
+             0px 0px 7px rgba(0,0,0,0.4);
+ +

如果我们把这个样式应用到我们 "Tommy the cat" 示例中的 {{htmlelement("h1")}} 元素，就像这样：

+ + + +

{{ EmbedLiveSample('多种阴影', '100%', 220) }}

+ +
+

注意: 你可以看到更多有趣的关于 text-shadow 使用的示例在 Moonlighting with CSS text-shadow.

+
+ +

文本布局

+ +

有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。

+ +

文本对齐

+ +

 {{cssxref("text-align")}} 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：

+ + + +

如果我们应用 text-align: center; 到我们例子中的 {{htmlelement("h1")}} 元素中，结果如下：

+ + + +

{{ EmbedLiveSample('文本对齐', '100%', 220) }}

+ +

行高

+ +

 {{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:

+ +
line-height: 1.5;
+ +

把这个样式应用到我们示例中的 {{htmlelement("p")}} 元素，结果如下：

+ + + +

{{ EmbedLiveSample('行高', '100%', 250) }}

+ +

字母和单词间距

+ +

{{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.

+ +

所以作为例子，如果我们把这个样式应用到我们的示例中的 {{htmlelement("p")}} 段落的第一行：

+ +
p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+ +

我们会得到下面的结果：

+ + + +

{{ EmbedLiveSample('字母和字间距', '100%', 250) }}

+ +

其他一些值得看一下的属性

+ +

以上属性让你了解如何开始在网页上设置文本， 但是你可以使用更多的属性。我们只是想介绍最重要的。一旦你习惯使用上面的内容，你还应该探索以下几点：

+ +

Font 样式:

+ + + +

文本布局样式：

+ + + +

Font 简写

+ +

许多字体的属性也可以通过 {{cssxref("font")}} 的简写方式来设置 . 这些是按照以下顺序来写的：  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.

+ +

如果你想要使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的。

+ +

{{cssxref("font-size")}} 和 {{cssxref("line-height")}} 属性之间必须放一个正斜杠。

+ +

一个完整的例子如下所示：

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

动手练习: 使用样式文本

+ +

在这个动手练习中，我们没有任何具体的练习来做：我们只是希望你和一些字体/文本布局属性相处地愉快，看看你可以制作什么！你可以使用离线HTML / CSS文件进行此操作，也可以将代码输入到下面的实时可编辑示例中。

+ +

如果你犯了错误，你可以使用 Reset 按钮来复原。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

小结

+ +

我们希望你在本篇文章中享受与文本在一起的时光！下篇文章会介绍所有你需要知道的关于 HTML 列表的样式。

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

-- cgit v1.2.3-54-g00ecf