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 +++++++++++++++++++++ files/zh-cn/learn/css/styling_text/index.html | 54 ++ .../css/styling_text/styling_links/index.html | 431 ++++++++++++ .../css/styling_text/styling_lists/index.html | 374 +++++++++++ .../styling_text/typesetting_a_homepage/index.html | 119 ++++ .../learn/css/styling_text/web_fonts/index.html | 186 ++++++ 6 files changed, 1891 insertions(+) create mode 100644 files/zh-cn/learn/css/styling_text/fundamentals/index.html create mode 100644 files/zh-cn/learn/css/styling_text/index.html create mode 100644 files/zh-cn/learn/css/styling_text/styling_links/index.html create mode 100644 files/zh-cn/learn/css/styling_text/styling_lists/index.html create mode 100644 files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html create mode 100644 files/zh-cn/learn/css/styling_text/web_fonts/index.html (limited to 'files/zh-cn/learn/css/styling_text') 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")}}

diff --git a/files/zh-cn/learn/css/styling_text/index.html b/files/zh-cn/learn/css/styling_text/index.html new file mode 100644 index 0000000000..ec4822b9ad --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/index.html @@ -0,0 +1,54 @@ +--- +title: 为文本添加样式（样式化文本） +slug: Learn/CSS/为文本添加样式 +tags: + - CSS + - 代码脚步 + - 列表lists + - 初学者 + - 字体Fonts + - 字母letter + - 文字font + - 文本Text + - 模块化Module + - 网络字体 web fonts + - 行line + - 链接Links + - 阴影shadow +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

掌握了 CSS 语言的基础之后，对于您来说，下一个需要关心的 CSS 主题就是为文本添加样式——一个您将会最经常使用 CSS 做的事情。在这里，我们专注于为文本样式的基础，包括设置字体、粗细、斜体、行还有字符间距、阴影以及文本的其他特征。我们将会通过在您的网页中应用自定义字体、样式化列表以及链接来圆满地结束本模块。

+ +

前提

+ +

在开始这一模块之前，您应当像 HTML 介绍 模块中所探讨的，已经熟悉了基本的HTML，以及像 CSS 介绍 中所详述的，对自己的 CSS 基础感觉还满意。

+ +
+

注意: 如果您所使用的是不能创建自己的文件的电脑、平板电脑或其他设备的话，您可以在一个在线编码程序 JSBin 或 Thimble 中尝试（大部分的）代码例子。

+
+ +

导引

+ +

这个模块包括了以下文章，这些文章将教会您所有的基本功以支持您为 HTML 文本内容添加样式。

+ +
+
基本的文本以及字体样式
+
在本文章中，我们将通篇了解文本、字体样式的所有基础，包括设置字体粗细（ font weight ）、字体系列及样式（ family and style ）、字体缩写（ font shorthand ）、文本排列（ text alignment ）和其他的效果，还有行（ line ）以及字符间距（ letter spacing ）。
+
样式化列表
+
对于大部分内容来说，列表的行为表现跟其他任何文本其实差不多，但您也需要了解还有一些专门用于列表的 CSS 样式以及考虑一些最好的实践方式。本文章将阐释这一切。
+
样式化链接
+
当您为链接添加样式时，很重要的一点是要去理解怎样有效地使用伪类去修饰链接的状态，以及怎么去修饰不同的接口功能例如导航菜单和面板中所使用的链接。我们将会在这篇文章中讨论这些话题。
+
网络字体
+
在这里我们将会详细地探索网络字体——这会允许您与您的网页一同下载自定义字体，来实现更为不同的个性化字体样式。
+
+ +

评估

+ +

以下的评估将会评测您对以上导引所涵盖的为文本添加样式的技术的理解。

+ +
+
对一个社区学校的主页进行排版
+
在这个评估中，我们通过让您为一个社区学校的主页添加文本样式来测试您对文本样式的理解程度。
+
diff --git a/files/zh-cn/learn/css/styling_text/styling_links/index.html b/files/zh-cn/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..df2e7c6093 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,431 @@ +--- +title: 样式化链接 +slug: Learn/CSS/为文本添加样式/Styling_links +tags: + - 伪类 + - 悬浮 + - 标签 + - 聚焦 + - 菜单 + - 超链接 + - 链接 +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+
+ +

当为 links 添加样式时, 理解利用伪类有效地建立链接状态是很重要的，以及如何为链接添加样式来实现常用的功能，比如说导航栏、选项卡。我们将在本文中关注所有这些主题。

+ + + + + + + + + + + + +
学习本章节的前提:基本的计算机使用能力，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习 Introduction to CSS), CSS text and font fundamentals.
目的:学习如何将样式应用到链接状态，以及如何使用链接实现常见的 UI 功能，比如导航菜单。
+ +

让我们来看一些链接

+ +

根据最佳实践  创建超链接 中的练习，我们看到了如何在你的 HTML 中实现链接。在本篇文章中，我们会以这个知识为基础，向你展示将样式应用到链接的最佳实践。

+ +

链接状态

+ +

第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式:

+ + + +

默认的样式

+ +

下面的例子说明了一个链接的默认行为表现 (这里的 CSS 仅仅是为了放大和居中文本，使内容更加突出)

+ +
<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('默认的样式', '100%', 120) }}

+ +

当你观察默认样式的时候，你也许会注意到一些东西:

+ + + +

有趣的是，这些默认的样式与20世纪90年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：

+ + + +
+

注意: 你不仅仅只限于上述属性来把样式应用到你的链接上，你可以用任何你喜欢的属性，就是不要搞得太疯狂！

+
+ +

将样式应用到一些链接

+ +

现在我们已经详细地看了默认的状态，让我们看一下典型的链接样式的设置。

+ +

开始之前，我们先写出我们的空规则集：

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

这几个规则的顺序是有意义的，因为链接的样式是建立在另一个样式之上的，比如，第一个规则的样式也会在后面的规则中生效，一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。要记住这个顺序，你可以尝试这样帮助记忆：LoVe Fears HAte.

+ +

现在让我们再添加一些信息，得到正确的样式：

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

这里还提供了一些示例HTML，供你应用CSS：

+ +
<p>There are several browsers available, such as <a href="https://www.mozilla.org/zh-CN/firefox/">Mozilla
+Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
+<a href="https://www.microsoft.com/zh-CN/windows/microsoft-edge">Microsoft Edge</a>.</p>
+ +

把这两个放在一起，我们得到这样的结果：

+ +

{{ EmbedLiveSample('将样式应用到一些链接', '100%', 150) }}

+ +

那么我们在这里做了什么? 这个看起来肯定和默认的样式不同，但仍然提供了一个熟悉的体验，好让用户知道发生了什么：

+ + + +

动手练习: 为你的链接添加样式

+ +

在这个动手练习部分，我们希望你使用我们的空规则集，然后添加你自定义的规则，从而使链接看上去比较酷。发挥你的想象力，大胆地做吧。我们相信你可以想出一些更酷的东西，就像我们上面的例子一样。

+ +

如果你犯了错误，你都可以使用 Reset 按钮来重置。 如果你遇到了困难，可以按 Show solution 按钮来显示我们上文中的例子。

+ + + +

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

+ +

在链接中包含图标

+ +

常见的做法是在链接中包含图标，使链接提供更多关于链接指向的内容的信息。让我们来看一个简单的例子，例子中为一个外部链接 (链接指向的不是本站，而是外部站点)。这样的图标通常看起来像一个指向盒子的小箭头，比如, 我们会使用icons8.com上的这个优秀的范例。

+ +

让我们来看一些能给我们这个效果的 HTML 和 CSS。先是一些简单的等待你样式化的 HTML ：

+ +
<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
+look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
+out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
+ +

接着是 CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('在链接中包含图标', '100%', 150) }}

+ +

那么这里发生了什么? 我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里，我们在外部链接上插入了一个自定义背景图片，这和上篇自定义列表项目符号文章的做法很像。这次，我们使用了 {{cssxref("background")}} 简写，而不是分别使用多个属性。我们设置了我们想要插入的图片的路径，指定了 no-repeat ，这样我们只插入了一次图片，然后指定位置为100%，使其出现在内容的右边，距离上方是0px。

+ +

我们也使用 {{cssxref("background-size")}} 来指定要显示的背景图像的大小，为了满足响应式网站设计的需要，在图标更大，需要再重新调整它的大小的时候，这样做是很有帮助的。但是，这仅适用于IE 9及更高版本。所以你如果需要支持那些老的浏览器，只能调整图像的原始大小，然后插入。

+ +

最后，我们在链接上设置 {{cssxref("padding-right")}} ，为背景图片留出空间，这样就不会让它和文本重叠了。

+ +

最后的问题，我们是如何只选中了外部链接的？如果你正确编写你的HTML链接 ，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个属性选择器——a[href*="http"] ——选中 {{htmlelement("a")}} 元素，但是这样只会选中那些拥有 {{htmlattrxref("href","a")}} 属性，且属性的值包含 "http" 的 {{htmlelement("a")}}的元素。

+ +

就这样啦，尝试重新审视上面的动手练习部分，尝试这种新技术！

+ +
+

注意: 不要担心，如果你目前不熟悉 backgrounds 和 responsive web design ; 这些会在其他地方解释。

+
+ +

样式化链接为按钮

+ +

目前在本文中探索的用法也可以用在其他方面。比如，悬停 (hover) 的状态可以为不同的元素应用样式，不只是链接，你也许会想添加悬停状态的样式到段落、列表项、或者是其他东西。

+ +

此外，在某些情况下，链接通常会应用样式，使它看上去的效果和按钮差不多，一个网站导航菜单通常是标记为一个列表，列表中包含链接，这可以很容易地被设计为看起来像一组控制按钮或是选项卡，主要是用于让用户可以访问站点的其他部分，现在让我们来看一看。

+ +

首先，一些 HTML:

+ +
<ul>
+  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+</ul>
+ +

接着，是我们的 CSS:

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

这给我们以下结果：

+ +

{{ EmbedLiveSample('样式化链接为按钮', '100%', 100) }}

+ +

让我们来解释一下这里发生了什么，主要是几个有趣的部分:

+ + + +
+

注意: 你也许会注意到 HTML 中的列表的每项内容都在同一行上，这是因为 inline-block 元素在页面上创建的空格换行符，就像几个字之间的空格，这样的空隙也许会破坏我们的水平导航菜单布局。所以我们删除了空格。你可以在  Fighting the space between inline block elements 找到有关此问题的更多信息（和解决方案）。

+
+ +

测试你的技巧！

+ +

你已经到了本文结尾，并且在我们的交互学习部分已经做了一些技巧测试。但是你在继续之前记住了最重要的信息了吗？你可以在模块末尾找到一个用于验证你已掌握知识的评估——见给一个社区大学的主页排版。

+ +

这个评估测试了这个模块讨论到的所有知识，这样你可能在读下一篇文章之前想看一下它。

+ +

小结

+ +

我们希望本文为你提供有关链接的所有知识——目前！我们的样式文本模块中的最后一篇文章详细介绍了如何在你的网站上使用自定义字体，或者更熟悉网络字体。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git a/files/zh-cn/learn/css/styling_text/styling_lists/index.html b/files/zh-cn/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..075b457836 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,374 @@ +--- +title: 样式列表 +slug: Learn/CSS/为文本添加样式/Styling_lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

List列表 大体上和其他文本一样，但是仍有一些你需要知道的特殊CSS属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。

+ + + + + + + + + + + + +
前置知识:Basic computer literacy, HTML basics (study Introduction to HTML), CSS basics (study Introduction to CSS), 基本文本和字体样式.
目标:熟悉与列表相关的样式和最佳实践
+ +

一个简单的例子

+ +

首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的样式特性，而某些特性却又各不相同。Github上有未加载样式的例子（也可以查看源码。）

+ +

例子中列表的HTML代码如下：

+ +
<h2>Shopping (unordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ul>
+  <li>Humous</li>
+  <li>Pitta</li>
+  <li>Green salad</li>
+  <li>Halloumi</li>
+</ul>
+
+<h2>Recipe (ordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ol>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+
+<h2>Ingredient description list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<dl>
+  <dt>Humous</dt>
+  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dt>Pitta</dt>
+  <dd>A soft, slightly leavened flatbread.</dd>
+  <dt>Halloumi</dt>
+  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dt>Green salad</dt>
+  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
+</dl>
+ +

现在，如果你去到例子的展示页面，并使用浏览器开发者工具查看那些列表元素，你会注意到若干个默认的样式预设值：

+ + + +

处理列表间距

+ +

当您创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距（例如段落和图片，有时称为垂直节奏））和相互间的水平间距（您可以在 Github 上参考完成的样式示例 ，也可以找到源代码。）

+ +

用于文本样式和间距的CSS如下所示：

+ +
/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}
+
+ + + +

列表特定样式

+ +

现在我们来看一下列表的一般间距，我们来研究一些列表具有的特定属性。 我们从三个属性开始了解，这三个属性可以在 {{htmlelement("ul")}} 或  {{htmlelement("ol")}} 元素上设置：

+ + + +

符号样式

+ +

像上面所提及的， {{cssxref("list-style-type")}}  属性允许你设置项目符号点的类型，在我们的例子中，我们在有序列表上设置了大写罗马数字：

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

效果显示如下：

+ +

an ordered list with the bullet points set to appear outside the list item text.

+ +

您可以通过  {{cssxref("list-style-type")}}  参考页面查找到更多选项。

+ +

项目符号位置

+ +

{{cssxref("list-style-position")}} 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。 如上所示，默认值为 outside，这使项目符号位于列表项之外。

+ +

如果值设置为 inside，项目条目则位于行内。

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

an ordered list with the bullet points set to appear inside the list item text.

+ +

使用自定义的项目符号图片

+ +

{{cssxref("list-style-image")}} 属性允许对于项目符号使用自定义图片。其语法相当简单：

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

然而，这个属性在控制项目符号的位置，大小等方面是有限的。 您最好使用{{cssxref("background")}} 系列属性，您将在 Styling boxes 模块中了解更多信息。在这里我们仅做一点尝试！

+ +

结束我们的例子，我们样式化无序列表像这样（放到您之前所见的顶部）：

+ +
ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

我们的所做如下：

+ + + +

效果显示如下：

+ +

an unordered list with the bullet points set as little star images

+ +

list-style 速记

+ +

上述提到的三种属性可以用一个单独的速记属性 {{cssxref("list-style")}} 来设置。例如：

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

可以被如下方式代替：

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

属性值可以任意顺序排列，你可以设置一个，两个或者三个值（该属性的默认值为 disc, none, outside），如果指定了 type 和 image，如果由于某种原因导致图像无法加载，则 type 将用作回退。

+ +

管理列表计数

+ +

有时，您可能想在有序列表上进行不同的计数方式。例如： 从1以外的数字开始，或向后倒数，或者按步或多于1计数。HTML和CSS有一些工具可以帮助您

+ +

start

+ +

{{htmlattrxref("start","ol")}} 属性允许你从1 以外的数字开始计数。示例如下：

+ +
<ol start="4">
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

输出的结果如下：

+ +

{{ EmbedLiveSample('start', '100%', 150) }}

+ +

reversed

+ +

{{htmlattrxref("reversed","ol")}} 属性将启动列表倒计数。示例如下：

+ +
<ol start="4" reversed>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

输出的结果如下：

+ +

{{ EmbedLiveSample('reversed', '100%', 150) }}

+ +

value

+ +

{{htmlattrxref("value","ol")}} 属性允许设置列表项指定数值，示例如下:

+ +
<ol>
+  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
+  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="6">Wash and chop the salad.</li>
+  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

输出的结果如下：

+ +

{{ EmbedLiveSample('value', '100%', 150) }}

+ +
+

注意: 纵然你使用非数字的 {{cssxref("list-style-type")}}, 你仍需要使用与数值同等意义的值作为 value 的属性。

+
+ +

主动学习: 为嵌套式列表添加样式

+ +

在该学习环节，我们希望你使用如上所学尝试为一个嵌套式列表添加样式。我们已经提供了 HTML , 在此之上请完成如下：

+ +
    +
  1. 为该无序列表提供方形项目符号。
    2. +
  2. 为该无序列表项和有序列表项提供基于其字体大小 1.5 的行高。
    3. +
  3. 为有序列表提供小写字母的项目符号。
    4. +
  4. 对列表进行自由发挥，尝试不同的项目符号类型，间距，以及其他的各种属性。
    5. +
+ +

如果犯了错误，可以随时点击 Reset（重置） 按钮进行重新设置。如果你真的遇到困难无法继续下去，点击 Show solution（显示解决方案）按钮查看可行的解决方案。

+ + + +

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

+ +

另请参阅

+ +

CSS计数器提供用于自定义列表计数和样式的高级工具，但它们相当复杂。 如果你想更深入了解，请查看如下资源：

+ + + +

总结

+ +

一旦你掌握一些相关的基础原则和特定属性，列表的样式还是相对容易理解的。在下篇文章中我们将转到另一话题——为链接提供样式的各种技巧。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

diff --git a/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html new file mode 100644 index 0000000000..98f86f125f --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html @@ -0,0 +1,119 @@ +--- +title: 作业：排版社区大学首页 +slug: Learn/CSS/为文本添加样式/Typesetting_a_homepage +tags: + - CSS + - 初学者 + - 字体 + - 样式化文本 + - 网络字体 + - 链接 +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

在本测评中，通过对社区学校主页的文本样式化，我们会测试你对所有本模块涉及到的文本样式化技术的理解。你或许也会从中获得乐趣。

+ + + + + + + + + + + + +
预备条件:在本次测评前，你应该完成了本模块所有章节。
目标:测试对CSS文本样式化技术的理解。
+ +

开始

+ +

在本测评开始前，你应该:

+ + + +
+

注意: 或者，你可以使用像 JSBin 或 Thimble 的网站完成你的测评。你可以把HTML和CSS粘贴到在线编辑器中，并使用this URL指定背景图像。如果你使用的在线编辑器没有单独的CSS面板，你可以将其放在HTML文件的<style>元素中。

+
+ +

项目简介

+ +

你有一个虚构的社区大学主页的未处理HTML文件和一些CSS文件。这些CSS文件把网页分成两栏布局，提供了一些简单的样式化。你将在CSS文件底部的comment下写你的CSS，这样可以方便地标出你的工作。不要担心选择器一直重复；我们会帮你跳过这个问题。

+ +

字体：

+ + + +

文本样式化基础：

+ + + +

链接：

+ + + +

列表：

+ + + +

导航栏菜单:

+ + + +

提示与技巧

+ + + +

实例

+ +

下图展示了其中一种设计完成后的例子。

+ +

+ +

测评

+ +

如果你将本测评作为课程的一部分，你应该能够将你的作品交给你的老师/指导员打分。如果你是自学的，你可以很轻松地在discussion thread for this exercise，或者Mozilla IRC的#mdn IRC 频道上获得打分。先尝试完成本次练习——作弊是学不到任何东西的！

+ +

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

在本单元中

+ + diff --git a/files/zh-cn/learn/css/styling_text/web_fonts/index.html b/files/zh-cn/learn/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..ad9691cb00 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/web_fonts/index.html @@ -0,0 +1,186 @@ +--- +title: Web 字体 +slug: Learn/CSS/为文本添加样式/Web_字体 +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

在模块的第一篇文章中，我们探讨了用于样式化字体和文本的基本CSS特性。在这篇文章中，我们将更进一步，详细地探索web字体——它们允许您下载自定义字体和您的web页面，以允许更多不同的、自定义的文本样式。

+ + + + + + + + + + + + +
预备知识:基本计算机素养，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习Introduction to CSS), CSS文本和字体基础 。
目标:学习如何将web字体应用到web页面，使用第三方服务，或者编写自己的代码。
+ +

字体种类回顾

+ +

正如我们在基本文本和字体样式中所看到的那样，应用到您的HTML的字体可以使用 {{cssxref("font-family")}}属性来控制。您需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。

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

这个系统运行良好，但是对于传统的web开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 Web-safe 字体。您可以使用字体堆栈来指定可选择的字体，后面是Web-safe的替代选项，然后是默认的系统字体，但是为了确保您的设计在每种字体中都显示正常，这样增加了测试的开销。

+ +

Web 字体

+ +

但是还有一种选择，它非常有效，回到IE版本6。Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。太酷啦！所需的语法如下所示：

+ +

首先，在CSS的开始处有一个{{cssxref("@font-face")}}块，它指定要下载的字体文件：

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.ttf");
+}
+
+ +

在这个下面，你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：

+ +
html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+ +

语法确实比这更复杂，下面我们将详细介绍。

+ +

关于网页字体有两件重要的事情要记住：

+ +
    +
  1. 浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如,大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。
    2. +
  2. 字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。
    3. +
+ +
+

注意： Web字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！

+
+ +

自主学习:web字体示例

+ +

记住这一点，让我们从最初的原则构建一个基本的web字体示例。使用嵌入的live示例很难演示这一点，因此，我们希望您按照下面几节中详细介绍的步骤来了解这个过程。

+ +

你应该使用 web-font-start.html 和 web-font-start.css 文件作为开始添加到你的代码中（又见预览版。）现在，在你的电脑上的一个新目录中复制这些文件。在 web-font-start.css文件中，您将找到一些最小的CSS来处理这个示例的基本布局和排版。

+ +

查找字体

+ +

对于本例，我们将使用两种web字体，一种用于标题，另一种用于正文文本。首先，我们需要找到包含字体的字体文件。字体是由字体铸造厂创建的，并且存储在不同的文件格式中。
+ 通常有三种类型的网站可以获得字体：

+ + + +

让我们找到一些字体！前往Font Squirrel 并选择两种字体——一种用于标题的有趣的字体(可能是一种不错的显示字体或无衬线字体)，和一种用于段落，稍微不那么华丽，更易于阅读的字体。当您找到每种字体时，按下下载按钮，并将该文件保存在与您先前保存的HTML和CSS文件相同的目录中。无论它们是TTF(True Type Fonts))还是OTF(Open Type字体)都不重要。

+ +

在每种情况下，都要解压字体包(Web字体通常分布在包含字体文件和许可信息的ZIP文件中。)您可能会在包中发现多个字体文件，一些字体是作为一个具有不同变体的家庭分布的，例如，瘦、中、粗体、斜体、斜体等等。对于这个例子，我们只是想让您自己考虑一个单一的字体文件。

+ +
+

注意： 在右边栏的“查找字体”部分中，您可以单击不同的标记和分类来筛选显示的选项。

+
+ +

生成所需代码

+ +

现在您需要生成所需的代码(以及字体格式)。对于每种字体，遵循以下步骤：

+ +
    +
  1. 确保您已经满足了任何许可证的要求，如果您打算在一个商业和/或Web项目中使用它。
    2. +
  2. 前往 Fontsquirrel Webfont Generator.
    3. +
  3. 使用上传字体按钮上传你的两个字体文件。
    4. +
  4. 勾选复选框，“是的，我上传的字体符合网络嵌入的合法条件。
    5. +
  5. 点击下载你的套件（kit）。
    6. +
+ +

在生成器完成处理之后，您应该得到一个ZIP文件，将它保存在与HTML和CSS相同的目录中。

+ +

在演示中实现代码

+ +

在这一点上解压您刚刚生成的webfont套件。在解压的目录中，您将看到三个有用的条目：

+ + + +

要在演示中实现这些字体，请遵循以下步骤：

+ +
    +
  1. 将解压缩的目录重命名为简易的目录，比如fonts
    2. +
  2. 打开 stylesheet.css 文件，把包含在你的网页中的 @font-face块复制到你的 web-font-start.css 文件—— 你需要把它们放在最上面，在你的CSS之前，因为字体需要导入才能在你的网站上使用。
    3. +
  3. 每个url()函数指向一个我们想要导入到我们的CSS中的字体文件——我们需要确保文件的路径是正确的，因此，在每个路径的开头添加fonts/ （必要时进行调整）。
    4. +
  4. 现在，您可以在字体栈中使用这些字体，就像任何web安全或默认的系统字体一样。
    + 例如： + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

你应该得到一个演示页面，上面有一些漂亮的字体。因为不同字体的字体大小不同，你可能需要调整大小、间距等，以区分外观和感觉。

+ +

+ +
+

注意：如果对于要让它正常工作您有任何问题，可以自由地将您的版本与我们完成的文件进行比较——见 web-font-finished.html 和 web-font-finished.css (运行完成的示例)。

+
+ +

使用在线字体服务

+ +

在线字体服务通常会为你存储和服务字体，这样你就不用担心写@font-face代码了，通常只需要在你的网站上插入一两行代码就可以让一切都运行。例子包括Typekit 和Cloud.typography。大多数这些服务都是基于订阅的，除了Google Fonts，这是一个有用的免费服务，特别是对于快速的测试工作和编写演示。

+ +

大多数这些服务都很容易使用，所以我们不会详细地介绍它们。让我们快速浏览一下Google Fonts，这样你就能明白它的意思了。再次的，使用web-font-start.html 和 web-font-start.css a的副本作为你的开始。

+ +
    +
  1. 前往 Google Fonts.
    2. +
  2. 使用左边的过滤器来显示你想要选择的字体类型，并选择一些你喜欢的字体。
    3. +
  3. 要选择字体种类，按下按钮旁边的 ⊕ 按钮。
    4. +
  4. 当您选择好字体种类时，按下页面底部的[Number] 种类选择。
    5. +
  5. 在生成的屏幕中，首先需要复制所显示的HTML代码行，并将其粘贴到HTML文件的头部。将其置于现有的{{htmlelement("link")}}元素之上，使得字体是导入的，然后在你的CSS中使用它。
    6. +
  6. 然后，您需要将CSS声明复制到您的CSS中，以便将自定义字体应用到您的HTML。
    7. +
+ +
+

注意：如果你需要对比我们的，你可以在 google-font.html和google-font.css找到完整版本的。（见预览版）

+
+ +

关于@font-face的更多细节

+ +

让我们来探索由fontsquirrel为您生成的@font-face语法。这是其中一个块的样子：

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）", 这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax。让我们来看看它是怎么做的：

+ + + +
+

注意：您还可以为您的web字体指定特定的{{cssxref("font-variant")}} 和 {{cssxref("font-stretch")}} )值。在较新的浏览器中，您还可以指定一个{{cssxref("unicode-range")}}值，这是一个您需要使用什么web字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan写的Creating Custom Font Stacks with Unicode-Range在如何利用这个问题上提供了一些有用的建议。

+
+ +

总结

+ +

既然您已经完成了我们关于文本样式基础的文章，现在是时候用我们对模块的评估来测试您的理解了，为社区学校的主页进行排版。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

-- cgit v1.2.3-54-g00ecf