diff options
Diffstat (limited to 'files/zh-cn/learn/css/styling_text')
6 files changed, 1891 insertions, 0 deletions
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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary">在这篇文章中，我们将带你开始掌握 {{glossary("CSS")}} 的文字样式的旅程。</span>这里我们将详细介绍文本/字体样式的所有基本原理，包括设置文字的粗细，字体和样式，文字的属性简写，文字的对齐，和其他效果，以及行和字母间距。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">先决条件：</th> + <td>基本的电脑操作，HTML 基础 (学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>)，CSS 基础 (学习 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>).</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>了解在网页上设计文本所需的基本属性和技术。</td> + </tr> + </tbody> +</table> + +<h2 id="CSS中的文字样式涉及什么？">CSS中的文字样式涉及什么？</h2> + +<p>正如你已经在你使用 HTML 和 CSS 完成工作时所经历的一样，元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，你可以使用 {{htmlelement("br")}} 元素。</p> + +<div class="note"> +<p><strong>注意</strong>: 如果上面的段落让你感到困惑，没关系，在继续之前，可以重新看看我们的 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Box_model">Box model</a> 文件，复习框模型的理论。</p> +</div> + +<p>用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。</p> + +<ul> + <li><strong>字体样式</strong>: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。</li> + <li><strong>文本布局风格</strong>: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( {{htmlelement("span")}} 或者 {{htmlelement("strong")}}), 或者使用伪元素，像<a href="/zh-CN/docs/Web/CSS/::first-letter">::first-letter</a> (选中元素文本的第一个字母), <a href="/zh-CN/docs/Web/CSS/::first-line">::first-line</a> (选中元素文本的第一行), 或者 <a href="/zh-CN/docs/Web/CSS/::selection">::selection</a> (当前光标双击选中的文本)</p> +</div> + +<h2 id="字体">字体</h2> + +<p>我们直接来看看样式字体的属性。在这个例子中，我们会在一个相同的 HTML 示例中应用一些不同的 CSS 属性，就像这样：</p> + +<pre class="brush: html"><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></pre> + +<p>你可以在这找到完成版本 <a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">finished example on Github</a> (也可以看源码 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">the source code</a>.)</p> + +<h3 id="颜色">颜色</h3> + +<p>{{cssxref("color")}} 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 {{cssxref("text-decoration")}} 属性放置在文本下方或上方的线 (underline overline)。</p> + +<p><code>color</code> 也可以接受任何合法的 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS 颜色单位</a>, 比如:</p> + +<pre class="brush: css">p { + color: red; +}</pre> + +<p>这将导致段落变为红色，而不是标准的浏览器默认的黑色，如下所示：</p> + +<div class="hidden"> +<pre class="brush: html"><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></pre> +</div> + +<p>{{ EmbedLiveSample('颜色', '100%', 220) }}</p> + +<h3 id="字体种类">字体种类</h3> + +<p>要在你的文本上设置一个不同的字体，你可以使用 {{cssxref("font-family")}} 属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 {{anch("Default fonts", "default font")}}. 下面是一个简单的例子:</p> + +<pre class="brush: css">p { + font-family: arial; +}</pre> + +<p>这段语句使所有在页面上的段落都采用 arial 字体，这个字体可在任何电脑上找到。</p> + +<h4 id="网页安全字体">网页安全字体</h4> + +<p>说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 <strong>网页安全字体</strong>。</p> + +<p>大多数时候，作为网页开发者，我们希望对用于显示我们的文本内容的字体有更具体的控制。问题在于，需要一个方法来知道当前正在浏览我们的网站网页的电脑，它有哪些可用字体。我们并不是总能在每种情况下都知道这一点，但是网络安全字体在几乎所有最常用的操作系统（Windows，Mac，最常见的Linux发行版，Android和iOS版本）中都可用。</p> + +<p>实际的Web安全字体列表将随着操作系统的发展而改变，但是可以认为下面的字体是网页安全的，至少对于现在来说 (它们中的许多都非常流行，这要感谢微软在90年代末和21世纪初期的倡议<em><a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the Web</a></em> )：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">字体名称</th> + <th scope="col" style="white-space: nowrap;">泛型</th> + <th scope="col">注意</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td>通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。</td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td>某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。</td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td></td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td>某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。</td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>sans-serif</td> + <td>您应该小心使用这种字体——它在移动操作系统上并不广泛。</td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注意</strong>: 在各种资源中，<a href="http://www.cssfontstack.com/">cssfontstack.com</a> 网站维护了一个可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表，这可以帮助决策网站的安全性。</p> +</div> + +<div class="note"> +<p><strong>注意</strong>: 有一个可以下载来自一个网页的自定义字体的方法，允许你通过任何你想要的方法来定制你使用的字体：<strong>网页字体</strong>。这个有一点复杂，我们将在这个模块中的另一篇文章中讨论这一点。</p> +</div> + +<h4 id="默认字体">默认字体</h4> + +<p>CSS 定义了 5 个常用的字体名称: <code>serif<font face="Open Sans, Arial, sans-serif">, </font></code><code>sans-serif,<font face="Open Sans, Arial, sans-serif"> </font></code><code>monospace</code>, <code>cursive,</code>和 <code>fantasy. </code>这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况，浏览器会尽力提供一个看上去合适的字体。 <code>serif</code>, <code>sans-serif</code> 和 <code>monospace</code> 是比较好预测的，默认的情况应该比较合理，另一方面，<code>cursive</code> 和 <code>fantasy</code> 是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。</p> + +<p>五个名称定义如下：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">名称</th> + <th scope="col">定义</th> + <th scope="col">示例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>serif</code></td> + <td>有衬线的字体 （衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）</td> + <td><span style="font-family: serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>sans-serif</code></td> + <td>没有衬线的字体。</td> + <td><span style="font-family: sans-serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>monospace</code></td> + <td>每个字符具有相同宽度的字体，通常用于代码列表。</td> + <td><span style="font-family: monospace;">My big red elephant</span></td> + </tr> + <tr> + <td><code>cursive</code></td> + <td>用于模拟笔迹的字体，具有流动的连接笔画。</td> + <td><span style="font-family: cursive;">My big red elephant</span></td> + </tr> + <tr> + <td><code>fantasy</code></td> + <td>用来装饰的字体</td> + <td><span style="font-family: fantasy;">My big red elephant</span></td> + </tr> + </tbody> +</table> + +<h4 id="字体栈">字体栈</h4> + +<p>由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个<strong>字体栈</strong> (<strong>font stack</strong>)，这样的话，浏览器就有多种字体可以选择了。只需包含一个<code>font-family属性</code>，其值由几个用逗号分离的字体名称组成。比如</p> + +<pre class="brush: css">p { + font-family: "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。</p> + +<p>在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是Time New Roman - 这对于 sans-serif 字体是不利的！</p> + +<div class="note"> +<p><strong>注意</strong>: 有一些字体名称不止一个单词，比如<code>Trebuchet MS</code> ，那么就需要用引号包裹。</p> +</div> + +<h4 id="一个使用_font-family_的例子">一个使用 font-family 的例子</h4> + +<p>让我们把它添加到之前的例子上，给段落一个 sans-serif 的字体。</p> + +<pre class="brush: css">p { + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>这给我们以下结果：</p> + +<div class="hidden"> +<pre class="brush: html"><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></pre> +</div> + +<p>{{ EmbedLiveSample('一个使用_font-family_的例子', '100%', 220) }}</p> + +<h3 id="字体大小">字体大小</h3> + +<p>在我们之前的模块中的<a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS values and units</a> 文章，我们回顾了<a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>. 字体大小 (通过 {{cssxref("font-size")}} 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages">percentages</a>)，然而你在调整字体大小时，最常用的单位是：</p> + +<ul> + <li><code>px</code> (像素): 将像素的值赋予给你的文本。这是一个绝对单位， 它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。</li> + <li><code>em</code>: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素，这可能会变得棘手, 但它是可行的，如下图所示。为什么要使用这个麻烦的单位呢? 当你习惯这样做时，那么就会变得很自然，你可以使用<code>em</code>调整任何东西的大小，不只是文本。你可以有一个单位全部都使用 em 的网站，这样维护起来会很简单。</li> + <li><code>rem</code>: 这个单位的效果和 <code>em</code> 差不多，除了 1<code>rem</code> 等于 HTML 中的根元素的字体大小， (i.e. {{htmlelement("html")}}) ，而不是父元素。这可以让你更容易计算字体大小，但是遗憾的是， <code>rem</code> 不支持 Internet Explorer 8 和以下的版本。如果你的项目需要支持较老的浏览器，你可以坚持使用<code>em</code> 或 <code>px</code>, 或者是 {{glossary("polyfill")}} 就像 <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>. （这个单位在“CSS的值和单位”一节也有讲解）</li> +</ul> + +<p>元素的 <code>font-size</code> 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——{{htmlelement("html")}}开始，浏览器的 <code>font-size</code> 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值：16px。其他元素也许有默认的大小，比如 {{htmlelement("h1")}} 元素有一个 2em 的默认值，所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时，事情会变得棘手。比如，如果你有一个 {{htmlelement("article")}} 元素在你的页面上，然后设置它的 font-size 为 <code>1.5em</code> (通过计算，可以得到大小为 24px)，然后想让 <code><article></code> 元素中的段落获得一个计算值为 20px 的大小，那么你应该使用多少 em。</p> + +<pre class="brush: html"><!-- 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></pre> + +<p>你需要将 em 的值设置为 20/24, 或者 <code>0.83333333em</code>. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rem 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。</p> + +<h4 id="一个简单的_size_示例">一个简单的 size 示例</h4> + +<p>当调整你的文本大小时，将文档(document)的基础 <code>font-size</code> 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有<code>font-size</code>的规则集是一个好主意，这样它们就可以很容易被找到。</p> + +<p>我们的新结果是这样的:</p> + +<div class="hidden"> +<pre class="brush: html"><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> +</pre> +</div> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('字体大小', '100%', 220) }}</p> + +<h3 id="字体样式，字体粗细，文本转换和文本装饰">字体样式，字体粗细，文本转换和文本装饰</h3> + +<p>CSS 提供了 4 种常用的属性来改变文本的样子：</p> + +<ul> + <li>{{cssxref("font-style")}}: 用来打开和关闭文本 italic (斜体)。 可能的值如下 (你很少会用到这个属性，除非你因为一些理由想将斜体文字关闭斜体状态)： + <ul> + <li><code>normal</code>: 将文本设置为普通字体 (将存在的斜体关闭)</li> + <li><code>italic</code>: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。</li> + <li><code>oblique</code>: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。</li> + </ul> + </li> + <li>{{cssxref("font-weight")}}: 设置文字的粗体大小。这里有很多值可选 (比如 <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, 等等), 不过事实上你很少会用到 <code>normal</code> 和 <code>bold</code>以外的值： + <ul> + <li><code>normal</code>, <code>bold</code>: 普通或者<strong style="font-weight: bold;">加粗</strong>的字体粗细</li> + <li><code>lighter</code>, <code>bolder</code>: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。<code>100</code>–<code>900</code>: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。</li> + </ul> + </li> + <li>{{cssxref("text-transform")}}: 允许你设置要转换的字体。值包括： + <ul> + <li><code>none</code>: 防止任何转型。</li> + <li><code>uppercase</code>: 将所有文本转为大写。</li> + <li><code>lowercase</code>: 将所有文本转为小写。</li> + <li><code>capitalize</code>: 转换所有单词让其首字母大写。</li> + <li><code>full-width</code>: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。</li> + </ul> + </li> + <li>{{cssxref("text-decoration")}}: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为： + <ul> + <li><code>none</code>: 取消已经存在的任何文本装饰。</li> + <li><code>underline</code>: <u>文本下划线</u>.</li> + <li><code>overline</code>: <span style="text-decoration: overline;">文本上划线</span></li> + <li><code>line-through</code>: 穿过文本的线 <s style="text-decoration: line-through;">strikethrough over the text</s>.</li> + </ul> + 你应该注意到 {{cssxref("text-decoration")}} 可以一次接受多个值，如果你想要同时添加多个装饰值， 比如 <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>.。同时注意 {{cssxref("text-decoration")}} 是一个缩写形式，它由 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} 和 {{cssxref("text-decoration-color")}} 构成。你可以使用这些属性值的组合来创建有趣的效果，比如 <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li> +</ul> + +<p>我们来看一下这几个属性添加到我们的例子中：</p> + +<p>我们的新结果是这样的：</p> + +<div class="hidden"> +<pre class="brush: html"><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> +</pre> +</div> + +<pre class="brush: css">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; +}</pre> + +<p>{{ EmbedLiveSample('字体样式，字体粗细，文本转换和文本装饰', '100%', 220) }}</p> + +<h3 id="文字阴影">文字阴影</h3> + +<p>你可以为你的文本应用阴影，使用 {{cssxref("text-shadow")}} 属性。这最多需要 4 个值，如下例所示：</p> + +<pre class="brush: css">text-shadow: 4px 4px 5px red;</pre> + +<p>4 个属性如下:</p> + +<ol> + <li>阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, 但是 px 是比较合适的。这个值必须指定。</li> + <li>阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。</li> + <li>模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</li> + <li>阴影的基础颜色，可以使用大多数的 CSS 颜色单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>. 如果没有指定，默认为 <code>black</code>.</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>: 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 <code>-1px -1px</code>.</p> +</div> + +<h4 id="多种阴影">多种阴影</h4> + +<p>您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：</p> + +<pre class="brush: css"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>, + <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>, + <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>, + <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>如果我们把这个样式应用到我们 "Tommy the cat" 示例中的 {{htmlelement("h1")}} 元素，就像这样：</p> + +<div class="hidden"> +<pre class="brush: html"><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> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 26px; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 14px; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('多种阴影', '100%', 220) }}</p> + +<div class="note"> +<p><strong>注意</strong>: 你可以看到更多有趣的关于 <code>text-shadow</code> 使用的示例在 <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p> +</div> + +<h2 id="文本布局">文本布局</h2> + +<p>有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。</p> + +<h3 id="文本对齐">文本对齐</h3> + +<p> {{cssxref("text-align")}} 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：</p> + +<ul> + <li><code>left</code>: 左对齐文本。</li> + <li><code>right</code>: 右对齐文本。</li> + <li><code>center</code>: 居中文字</li> + <li><code>justify</code>: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。你需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个，你也应该考虑一起使用别的东西，比如 {{cssxref("hyphens")}}，打破一些更长的词语。</li> +</ul> + +<p>如果我们应用 <code>text-align: center;</code> 到我们例子中的 {{htmlelement("h1")}} 元素中，结果如下：</p> + +<div class="hidden"> +<pre class="brush: html"><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> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('文本对齐', '100%', 220) }}</p> + +<h3 id="行高">行高</h3> + +<p> {{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 <code>line-height</code>。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:</p> + +<pre class="brush: css">line-height: 1.5;</pre> + +<p>把这个样式应用到我们示例中的 {{htmlelement("p")}} 元素，结果如下：</p> + +<div class="hidden"> +<pre class="brush: html"><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> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('行高', '100%', 250) }}</p> + +<h3 id="字母和单词间距">字母和单词间距</h3> + +<p>{{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</p> + +<p>所以作为例子，如果我们把这个样式应用到我们的示例中的 {{htmlelement("p")}} 段落的第一行：</p> + +<pre class="brush: css">p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +}</pre> + +<p>我们会得到下面的结果：</p> + +<div class="hidden"> +<pre class="brush: html"><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> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('字母和字间距', '100%', 250) }}</p> + +<h3 id="其他一些值得看一下的属性">其他一些值得看一下的属性</h3> + +<p>以上属性让你了解如何开始在网页上设置文本， 但是你可以使用更多的属性。我们只是想介绍最重要的。一旦你习惯使用上面的内容，你还应该探索以下几点：</p> + +<p>Font 样式:</p> + +<ul> + <li>{{cssxref("font-variant")}}: 在小型大写字母和普通文本选项之间切换。</li> + <li>{{cssxref("font-kerning")}}: 开启或关闭字体间距选项。</li> + <li>{{cssxref("font-feature-settings")}}: 开启或关闭不同的 <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> 字体特性。</li> + <li>{{cssxref("font-variant-alternates")}}: 控制给定的自定义字体的替代字形的使用。</li> + <li>{{cssxref("font-variant-caps")}}: 控制大写字母替代字形的使用。</li> + <li>{{cssxref("font-variant-east-asian")}}: 控制东亚文字替代字形的使用, 像日语和汉语。</li> + <li>{{cssxref("font-variant-ligatures")}}: 控制文本中使用的连写和上下文形式。</li> + <li>{{cssxref("font-variant-numeric")}}: 控制数字，分式和序标的替代字形的使用。</li> + <li>{{cssxref("font-variant-position")}}: 控制位于上标或下标处，字号更小的替代字形的使用。</li> + <li>{{cssxref("font-size-adjust")}}: 独立于字体的实际大小尺寸，调整其可视大小尺寸。</li> + <li>{{cssxref("font-stretch")}}: 在给定字体的可选拉伸版本中切换。</li> + <li>{{cssxref("text-underline-position")}}: 指定下划线的排版位置，通过使用 <code>text-decoration-line</code> 属性的<code>underline</code> 值。</li> + <li>{{cssxref("text-rendering")}}: 尝试执行一些文本渲染优化。</li> +</ul> + +<p>文本布局样式：</p> + +<ul> + <li>{{cssxref("text-indent")}}: 指定文本内容的第一行前面应该留出多少的水平空间。</li> + <li>{{cssxref("text-overflow")}}: 定义如何向用户表示存在被隐藏的溢出内容。</li> + <li>{{cssxref("white-space")}}: 定义如何处理元素内部的空白和换行。</li> + <li>{{cssxref("word-break")}}: 指定是否能在单词内部换行。</li> + <li>{{cssxref("direction")}}: 定义文本的方向 (这取决于语言，并且通常最好让HTML来处理这部分，因为它是和文本内容相关联的。)</li> + <li>{{cssxref("hyphens")}}: 为支持的语言开启或关闭连字符。</li> + <li>{{cssxref("line-break")}}: 对东亚语言采用更强或更弱的换行规则。</li> + <li>{{cssxref("text-align-last")}}: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。</li> + <li>{{cssxref("text-orientation")}}: 定义行内文本的方向。</li> + <li>{{cssxref("word-wrap")}}: 指定浏览器是否可以在单词内换行以避免超出范围。</li> + <li>{{cssxref("writing-mode")}}: 定义文本行布局为水平还是垂直，以及后继文本流的方向。</li> +</ul> + +<h2 id="Font_简写">Font 简写</h2> + +<p>许多字体的属性也可以通过 {{cssxref("font")}} 的简写方式来设置 . 这些是按照以下顺序来写的： {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.</p> + +<p>如果你想要使用 <code>font</code> 的简写形式，在所有这些属性中，只有 <code>font-size</code> 和 <code>font-family</code> 是一定要指定的。</p> + +<p>{{cssxref("font-size")}} 和 {{cssxref("line-height")}} 属性之间必须放一个正斜杠。</p> + +<p>一个完整的例子如下所示：</p> + +<pre class="brush: css">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> + +<h2 id="动手练习_使用样式文本">动手练习: 使用样式文本</h2> + +<p>在这个动手练习中，我们没有任何具体的练习来做：我们只是希望你和一些字体/文本布局属性相处地愉快，看看你可以制作什么！你可以使用离线HTML / CSS文件进行此操作，也可以将代码输入到下面的实时可编辑示例中。</p> + +<p>如果你犯了错误，你可以使用 Reset 按钮来复原。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> + <p>Some sample text for your delight</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { + + }</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="小结">小结</h2> + +<p>我们希望你在本篇文章中享受与文本在一起的时光！下篇文章会介绍所有你需要知道的关于 HTML 列表的样式。</p> + +<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">掌握了 CSS 语言的基础之后，对于您来说，下一个需要关心的 CSS 主题就是为文本添加样式——一个您将会最经常使用 CSS 做的事情。在这里，我们专注于为文本样式的基础，包括设置字体、粗细、斜体、行还有字符间距、阴影以及文本的其他特征。我们将会通过在您的网页中应用自定义字体、样式化列表以及链接来圆满地结束本模块。</p> + +<h2 id="前提">前提</h2> + +<p>在开始这一模块之前，您应当像 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 介绍</a> 模块中所探讨的，已经熟悉了基本的HTML，以及像 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">CSS 介绍</a> 中所详述的，对自己的 CSS 基础感觉还满意。</p> + +<div class="note"> +<p><strong>注意</strong>: 如果您所使用的是不能创建自己的文件的电脑、平板电脑或其他设备的话，您可以在一个在线编码程序 <a href="http://jsbin.com/">JSBin</a> 或 <a href="https://thimble.mozilla.org/">Thimble</a> 中尝试（大部分的）代码例子。</p> +</div> + +<h2 id="导引">导引</h2> + +<p>这个模块包括了以下文章，这些文章将教会您所有的基本功以支持您为 HTML 文本内容添加样式。</p> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals">基本的文本以及字体样式</a></dt> + <dd>在本文章中，我们将通篇了解文本、字体样式的所有基础，包括设置字体粗细（ font weight ）、字体系列及样式（ family and style ）、字体缩写（ font shorthand ）、文本排列（ text alignment ）和其他的效果，还有行（ line ）以及字符间距（ letter spacing ）。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists">样式化列表</a></dt> + <dd>对于大部分内容来说，列表的行为表现跟其他任何文本其实差不多，但您也需要了解还有一些专门用于列表的 CSS 样式以及考虑一些最好的实践方式。本文章将阐释这一切。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Styling_text/Styling_links">样式化链接</a></dt> + <dd>当您为链接添加样式时，很重要的一点是要去理解怎样有效地使用伪类去修饰链接的状态，以及怎么去修饰不同的接口功能例如导航菜单和面板中所使用的链接。我们将会在这篇文章中讨论这些话题。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts">网络字体</a></dt> + <dd>在这里我们将会详细地探索网络字体——这会允许您与您的网页一同下载自定义字体，来实现更为不同的个性化字体样式。</dd> +</dl> + +<h2 id="评估">评估</h2> + +<p>以下的评估将会评测您对以上导引所涵盖的为文本添加样式的技术的理解。</p> + +<dl> + <dt><a href="/zh-CN/Learn/CSS/Styling_text/Typesetting_a_homepage">对一个社区学校的主页进行排版</a></dt> + <dd>在这个评估中，我们通过让您为一个社区学校的主页添加文本样式来测试您对文本样式的理解程度。</dd> +</dl> 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 +--- +<div> +<p>{{LearnSidebar}}</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> +</div> + +<p class="summary">当为 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">links</a> 添加样式时, 理解利用伪类有效地建立链接状态是很重要的，以及如何为链接添加样式来实现常用的功能，比如说导航栏、选项卡。我们将在本文中关注所有这些主题。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习本章节的前提:</th> + <td>基本的计算机使用能力，HTML 基础 (学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), CSS 基础 (学习 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals">CSS text and font fundamentals</a>.</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>学习如何将样式应用到链接状态，以及如何使用链接实现常见的 UI 功能，比如导航菜单。</td> + </tr> + </tbody> +</table> + +<h2 id="让我们来看一些链接">让我们来看一些链接</h2> + +<p>根据最佳实践 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">创建超链接</a> 中的练习，我们看到了如何在你的 HTML 中实现链接。在本篇文章中，我们会以这个知识为基础，向你展示将样式应用到链接的最佳实践。</p> + +<h3 id="链接状态">链接状态</h3> + +<p>第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">伪类</a> 来应用样式:</p> + +<ul> + <li><strong>Link (没有访问过的)</strong>: 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用{{cssxref(":link")}} 伪类来应用样式。</li> + <li><strong>Visited</strong>: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 {{cssxref(":visited")}} 伪类来应用样式。</li> + <li><strong>Hover</strong>: 当用户的鼠标光标刚好停留在这个链接，它可以使用 {{cssxref(":hover")}} 伪类来应用样式。</li> + <li><strong>Focus</strong>: 一个链接当它被选中的时候 (比如通过键盘的 <kbd>Tab</kbd> 移动到这个链接的时候，或者使用编程的方法来选中这个链接 {{domxref("HTMLElement.focus()")}}) 它可以使用 {{cssxref(":focus")}} 伪类来应用样式。</li> + <li><strong>Active</strong>: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 {{cssxref(":active")}} 伪类来应用样式。</li> +</ul> + +<h3 id="默认的样式">默认的样式</h3> + +<p>下面的例子说明了一个链接的默认行为表现 (这里的 CSS 仅仅是为了放大和居中文本，使内容更加突出)</p> + +<pre class="brush: html"><p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p> +</pre> + +<pre class="brush: css">p { + font-size: 2rem; + text-align: center; +}</pre> + +<p>{{ EmbedLiveSample('默认的样式', '100%', 120) }}</p> + +<p>当你观察默认样式的时候，你也许会注意到一些东西:</p> + +<ul> + <li>链接具有下划线。</li> + <li>未访问过的 (Unvisited) 的链接是蓝色的。</li> + <li>访问过的 (Visited) 的链接是紫色的.</li> + <li>悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。</li> + <li>选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接 (在 Mac 上, 你可能需要使用<em>Full Keyboard Access: All controls</em> 选项，然后再按下 <kbd>Ctrl</kbd> + <kbd>F7</kbd> ，这样就可以起作用)</li> + <li>激活 (Active) 链接的时候会变成红色 (当你点击链接时，请尝试按住鼠标按钮。)</li> +</ul> + +<p>有趣的是，这些默认的样式与20世纪90年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：</p> + +<ul> + <li>为链接使用下划线，但是不要在其他内容上也用下划线，以作区分。如果你不想要带有下划线的链接，那你至少要用其他方法来高亮突出链接。</li> + <li>当用户悬停或选择 (hover 或者 focused) 的时候，使链接有相应的变化，并且在链接被激活(active) 的时候，变化会有一些不同。可以使用以下CSS属性关闭/更改默认样式：</li> + <li>{{cssxref("color")}} 文字的颜色</li> + <li>{{cssxref("cursor")}} 鼠标光标的样式，你不应该把这个关掉，除非你有非常好的理由。</li> + <li>{{cssxref("outline")}} 文字的轮廓 (轮廓有点像边框，唯一的区别是边框占用了盒模型的空间，而轮廓没有； 它只是设置在背景图片的顶部)。outline 是一个有用的辅助功能，所以在把它关掉之前考虑清楚；你至少应该将悬停 (hover) 状态的样式同时应用到选中 (focus) 状态上。</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 你不仅仅只限于上述属性来把样式应用到你的链接上，你可以用任何你喜欢的属性，就是不要搞得太疯狂！</p> +</div> + +<h3 id="将样式应用到一些链接">将样式应用到一些链接</h3> + +<p>现在我们已经详细地看了默认的状态，让我们看一下典型的链接样式的设置。</p> + +<p>开始之前，我们先写出我们的空规则集：</p> + +<pre class="brush: css">a { + +} + + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</pre> + +<p>这几个规则的顺序是有意义的，因为链接的样式是建立在另一个样式之上的，比如，第一个规则的样式也会在后面的规则中生效，一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。要记住这个顺序，你可以尝试这样帮助记忆：<strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p> + +<p>现在让我们再添加一些信息，得到正确的样式：</p> + +<pre class="brush: css">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; +}</pre> + +<p>这里还提供了一些示例HTML，供你应用CSS：</p> + +<pre class="brush: html"><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></pre> + +<p>把这两个放在一起，我们得到这样的结果：</p> + +<p>{{ EmbedLiveSample('将样式应用到一些链接', '100%', 150) }}</p> + +<p>那么我们在这里做了什么? 这个看起来肯定和默认的样式不同，但仍然提供了一个熟悉的体验，好让用户知道发生了什么：</p> + +<ul> + <li>第一和第二条规则和本次讨论关系不大。</li> + <li>第三个规则使用了 <code>a</code> 选择器，取消了默认的文本下划线和链接被选中（focus）时的轮廓 （outline）（不同浏览器的默认行为可能不同），并为每个链接添加了少量的内边距（padding），所有这一切将在之后变得明确。</li> + <li>接着，我们使用<code>a:link</code>和<code>a:visited</code>选择器来设置未访问（unvisited）链接和访问过（visited）的链接的一点颜色上的变化，然后就能分辨开来了。</li> + <li>下面两条规则使用 <code>a:focus</code> 和 <code>a:hover</code> 来设置选中（focus）和悬停（hover）的链接为不同的背景颜色，再加上一个下划线，使链接更加突出。这里有两点需要注意： + <ul> + <li>下划线是使用 {{cssxref("border-bottom")}} 创造的, 而不是 {{cssxref("text-decoration")}}，有一些人喜欢这样，因为前者比后者有更好的样式选项， 并且绘制的位置会稍微低一点，所以不会穿过字母 (比如 字母 g 和 y 底部).</li> + <li>{{cssxref("border-bottom")}}的值被设置为<code>1px solid</code>，没有指定颜色。这样做可以使边框采用和元素文本一样的颜色，这在这样的情况下是很有用的，因为链接的每种状态下，文本是不同的颜色。</li> + </ul> + </li> + <li>最后, <code>a:active</code> 用来给链接一个不同的配色方案，当链接被激活 (activated) 时，让链接被激活的时候更加明显。</li> +</ul> + +<h3 id="动手练习_为你的链接添加样式">动手练习: 为你的链接添加样式</h3> + +<p>在这个动手练习部分，我们希望你使用我们的空规则集，然后添加你自定义的规则，从而使链接看上去比较酷。发挥你的想象力，大胆地做吧。我们相信你可以想出一些更酷的东西，就像我们上面的例子一样。</p> + +<p>如果你犯了错误，你都可以使用 <em>Reset 按钮来重置。 </em>如果你遇到了困难，可以按 <em>Show solution</em> 按钮来显示我们上文中的例子。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><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></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + +} + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="在链接中包含图标">在链接中包含图标</h2> + +<p>常见的做法是在链接中包含图标，使链接提供更多关于链接指向的内容的信息。让我们来看一个简单的例子，例子中为一个外部链接 (链接指向的不是本站，而是外部站点)。这样的图标通常看起来像一个指向盒子的小箭头，比如, 我们会使用<a href="https://icons8.com/web-app/741/external-link">icons8.com上的这个优秀的范例</a>。</p> + +<p>让我们来看一些能给我们这个效果的 HTML 和 CSS。先是一些简单的等待你样式化的 HTML ：</p> + +<pre class="brush: 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></pre> + +<p>接着是 CSS:</p> + +<pre class="brush: 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; +}</pre> + +<p>{{ EmbedLiveSample('在链接中包含图标', '100%', 150) }}</p> + +<p>那么这里发生了什么? 我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里，我们在外部链接上插入了一个自定义背景图片，这和上篇<a href="/zh-CN/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">自定义列表项目符号</a>文章的做法很像。这次，我们使用了 {{cssxref("background")}} 简写，而不是分别使用多个属性。我们设置了我们想要插入的图片的路径，指定了 <code>no-repeat</code> ，这样我们只插入了一次图片，然后指定位置为100%，使其出现在内容的右边，距离上方是0px。</p> + +<p>我们也使用 {{cssxref("background-size")}} 来指定要显示的背景图像的大小，为了满足响应式网站设计的需要，在图标更大，需要再重新调整它的大小的时候，这样做是很有帮助的。但是，这仅适用于IE 9及更高版本。所以你如果需要支持那些老的浏览器，只能调整图像的原始大小，然后插入。</p> + +<p>最后，我们在链接上设置 {{cssxref("padding-right")}} ，为背景图片留出空间，这样就不会让它和文本重叠了。</p> + +<p>最后的问题，我们是如何只选中了外部链接的？如果你正确编写你的<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML链接</a> ，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个<a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">属性选择器</a>——<code>a[href*="http"]</code> ——选中 {{htmlelement("a")}} 元素，但是这样只会选中那些拥有 {{htmlattrxref("href","a")}} 属性，且属性的值包含 "http" 的 {{htmlelement("a")}}的元素。</p> + +<p>就这样啦，尝试重新审视上面的动手练习部分，尝试这种新技术！</p> + +<div class="note"> +<p><strong>注意</strong>: 不要担心，如果你目前不熟悉 <a href="/zh-CN/docs/Learn/CSS/Styling_boxes">backgrounds</a> 和 <a href="/zh-CN/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">responsive web design</a> ; 这些会在其他地方解释。</p> +</div> + +<h2 id="样式化链接为按钮">样式化链接为按钮</h2> + +<p>目前在本文中探索的用法也可以用在其他方面。比如，悬停 (hover) 的状态可以为不同的元素应用样式，不只是链接，你也许会想添加悬停状态的样式到段落、列表项、或者是其他东西。</p> + +<p>此外，在某些情况下，链接通常会应用样式，使它看上去的效果和按钮差不多，一个网站导航菜单通常是标记为一个列表，列表中包含链接，这可以很容易地被设计为看起来像一组控制按钮或是选项卡，主要是用于让用户可以访问站点的其他部分，现在让我们来看一看。</p> + +<p>首先，一些 HTML:</p> + +<pre class="brush: 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></pre> + +<p>接着，是我们的 CSS:</p> + +<pre class="brush: 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; +}</pre> + +<p>这给我们以下结果：</p> + +<p>{{ EmbedLiveSample('样式化链接为按钮', '100%', 100) }}</p> + +<p>让我们来解释一下这里发生了什么，主要是几个有趣的部分:</p> + +<ul> + <li>我们的第二条规则删除了 {{htmlelement("ul")}} 元素的默认的 {{cssxref("padding")}}，然后设置了它的宽度是外部容器 {{htmlelement("body")}} (在这次条件下) 的 100% 。</li> + <li>{{htmlelement("li")}} 元素通常默认是块元素 (可见 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">types of CSS boxes</a> 回顾)，意味着它们各自会占用一行。在这个例子中，我们创建了一组水平列表的链接，所以在第三条规则中，我们设置了 {{cssxref("display")}} 属性为 inline，这会导致列表中的每项内容都会一起出现在同一行，它们现在表现得就像内联元素。</li> + <li>第四条规则，主要是 {{htmlelement("a")}} 元素的样式，这里比较复杂; 让我们一步一步来看： + <ul> + <li>和前面的例子一样，我们首先关掉了 {{cssxref("text-decoration")}} 和 {{cssxref("outline")}}，我们不希望这些破坏我们链接的样子。</li> + <li>接着，我们设置 {{cssxref("display")}} 为 <code>inline-block</code> ，{{htmlelement("a")}} 元素默认为内联元素，而且我们不希望它们像值为 <code>block</code> 时一样，线条超出自己的内容，我们确实想要控制它们的大小<code>inline-block</code> 允许我们这样做。</li> + <li>接着是尺寸的设置! 我们要填满整个 {{htmlelement("ul")}} 的宽度，为按钮之间留一些间距 (margin) (但不是右边边缘的间距)，我们有 5 个按钮需要容纳，所以它们的大小应该一样。为了做到这一点，我们设置 {{cssxref("width")}} 为 19.5%，然后 {{cssxref("margin-right")}} 为 0.625%. 你会注意到所有宽度加起来是 100.625%, 这样会让最后一个按钮溢出 <code><ul></code> ，然后显示到下一行中。但是，我们使用了下一条规则让它恢复到了 100%，这条规则选中了列表中的最后一个 <code><a></code>元素，然后删除了它的间距 (margin)。完成!</li> + <li>最后三条声明就比较简单了，主要是为链接各个状态添加了颜色。我们居中了每个链接中的文本，设置 {{cssxref("line-height")}} 为 3， 让按钮有一些高度 (这也具有垂直居中文本的优点)，并设置文本的颜色为黑色。</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 你也许会注意到 HTML 中的列表的每项内容都在同一行上，这是因为 inline-block 元素在页面上创建的空格换行符，就像几个字之间的空格，这样的空隙也许会破坏我们的水平导航菜单布局。所以我们删除了空格。你可以在 <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a> 找到有关此问题的更多信息（和解决方案）。</p> +</div> + +<h2 id="测试你的技巧！">测试你的技巧！</h2> + +<p>你已经到了本文结尾，并且在我们的交互学习部分已经做了一些技巧测试。但是你在继续之前记住了最重要的信息了吗？你可以在模块末尾找到一个用于验证你已掌握知识的评估——见<a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Typesetting_a_homepage">给一个社区大学的主页排版</a>。</p> + +<p>这个评估测试了这个模块讨论到的所有知识，这样你可能在读下一篇文章之前想看一下它。</p> + +<h2 id="小结">小结</h2> + +<p>我们希望本文为你提供有关链接的所有知识——目前！我们的样式文本模块中的最后一篇文章详细介绍了如何在你的网站上使用自定义字体，或者更熟悉网络字体。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><a href="/zh-CN/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">List列表</a> 大体上和其他文本一样，但是仍有一些你需要知道的特殊CSS属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前置知识:</th> + <td>Basic computer literacy, HTML basics (study <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), CSS basics (study <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals">基本文本和字体样式</a>.</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>熟悉与列表相关的样式和最佳实践</td> + </tr> + </tbody> +</table> + +<h2 id="一个简单的例子">一个简单的例子</h2> + +<p>首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的样式特性，而某些特性却又各不相同。<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">Github</a>上有未加载样式的例子（也可以查看<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">源码</a>。）</p> + +<p>例子中列表的HTML代码如下：</p> + +<pre class="brush: 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></pre> + +<p>现在，如果你去到例子的展示页面，并使用<a href="/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools">浏览器开发者工具</a>查看那些列表元素，你会注意到若干个默认的样式预设值：</p> + +<ul> + <li> {{htmlelement("ul")}} 和 {{htmlelement("ol")}} 元素设置{{cssxref("margin")}}的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); （在这里注意的是浏览器默认字体大小为16px）。</li> + <li>{{htmlelement("li")}} 默认是没有设置间距的。</li> + <li>{{htmlelement("dl")}} 元素设置 margin的顶部和底部: 16px(1em) ，无内边距设定。</li> + <li>{{htmlelement("dd")}} 元素设置为： {{cssxref("margin-left")}} <code>40px</code> (<code>2.5em</code>)。</li> + <li>在参考中提到的 {{htmlelement("p")}} 元素设置 margin的顶部和底部: 16px(1em)，和其他的列表类型相同。</li> +</ul> + +<h2 id="处理列表间距">处理列表间距</h2> + +<p>当您创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距（例如段落和图片，有时称为垂直节奏））和相互间的水平间距（您可以在 Github 上参考<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">完成的样式示例</a> ，也可以找到<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">源代码</a>。）</p> + +<p>用于文本样式和间距的CSS如下所示：</p> + +<pre class="brush: 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; +} +</pre> + +<ul> + <li>第一条规则集设置一个网站字体，基准字体大小为10px。 页面上的所有内容都将继承该规则集。</li> + <li>规则集2和3为标题、不同的列表类型和段落以及设置了相对字体大小（这些列表的子元素将会继承该规则集），这就意味着每个段落和列表都将拥有相同的字体大小和上下间距,有助于保持垂直间距一致。</li> + <li>规则集4在段落和列表项目上设置相同的 {{cssxref("line-height")}} ，因此段落和每个单独的列表项目将在行之间具有相同的间距。 这也将有助于保持垂直间距一致。</li> + <li>规则集5-7适用于描述列表 - 我们在描述列表的术语和其描述上设置与段落和列表项相同的行高，以及 {{cssxref("margin-bottom")}} 为1.5 rem（与段落（p）和列表项目（li））相同。 再次强调一遍，这里很好地实现了一致性！ 我们还使描述术语具有粗体字体，因此它们在视觉上脱颖而出。<span id="cke_bm_126E" style="display: none;"> </span></li> +</ul> + +<h2 id="列表特定样式">列表特定样式</h2> + +<p>现在我们来看一下列表的一般间距，我们来研究一些列表具有的特定属性。 我们从三个属性开始了解，这三个属性可以在 {{htmlelement("ul")}} 或 {{htmlelement("ol")}} 元素上设置：</p> + +<ul> + <li>{{cssxref("list-style-type")}} ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。</li> + <li>{{cssxref("list-style-position")}} ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。</li> + <li>{{cssxref("list-style-image")}} ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。</li> +</ul> + +<h3 id="符号样式">符号样式</h3> + +<p>像上面所提及的， {{cssxref("list-style-type")}} 属性允许你设置项目符号点的类型，在我们的例子中，我们在有序列表上设置了大写罗马数字：</p> + +<pre class="brush: css">ol { + list-style-type: upper-roman; +}</pre> + +<p>效果显示如下：</p> + +<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p> + +<p>您可以通过 {{cssxref("list-style-type")}} 参考页面查找到更多选项。</p> + +<h3 id="项目符号位置">项目符号位置</h3> + +<p>{{cssxref("list-style-position")}} 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。 如上所示，默认值为 outside，这使项目符号位于列表项之外。</p> + +<p>如果值设置为 inside，项目条目则位于行内。</p> + +<pre class="brush: css">ol { + list-style-type: upper-roman; + list-style-position: inside; +}</pre> + +<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p> + +<h3 id="使用自定义的项目符号图片">使用自定义的项目符号图片</h3> + +<p>{{cssxref("list-style-image")}} 属性允许对于项目符号使用自定义图片。其语法相当简单：</p> + +<pre class="brush: css">ul { + list-style-image: url(star.svg); +}</pre> + +<p>然而，这个属性在控制项目符号的位置，大小等方面是有限的。 您最好使用{{cssxref("background")}} 系列属性，您将在 <a href="/zh-CN/docs/Learn/CSS/Styling_boxes">Styling boxes</a> 模块中了解更多信息。在这里我们仅做一点尝试！</p> + +<p>结束我们的例子，我们样式化无序列表像这样（放到您之前所见的顶部）：</p> + +<pre class="brush: css">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; +}</pre> + +<p>我们的所做如下：</p> + +<ul> + <li>将 {{htmlelement("ul")}} 的 {{cssxref("padding-left")}} 从默认的 <code>40px</code>设置为 <code>20px</code>，然后在列表项上设置相同的数值。 这就是说，整个列表项仍然排列在列表中，但是列表项产生了一些用于背景图像的填充。 如果我们没有设置填充，背景图像将与列表项文本重叠，这看起来会很乱。</li> + <li>将 {{cssxref("list-style-type")}} 设置为none，以便默认情况下不会显示项目符号。 我们将使用 {{cssxref("background")}} 属性来代替项目符号。</li> + <li>为每个无序列表项插入项目符号，其相应的属性如下： + <ul> + <li>{{cssxref("background-image")}}: 充当项目符号的图片文件的参考路径</li> + <li>{{cssxref("background-position")}}: 这定义了所选元素背景中的图像将出现在哪里 - 在我们的示例中设置 <code>0 0</code>，这意味着项目符号将出现在每个列表项的最左上侧。</li> + <li>{{cssxref("background-size")}}: 设置背景图片的大小。 理想条件下，我们想要项目符号与列表项的大小相同（比列表项稍大或稍小亦可）。 我们使用的尺寸为1.6rem（16px），它非常吻合我们为项目符号设置的 20px 的填充， 16px 加上 4px 的空格间距，可以使项目符号和列表项文本效果更好。</li> + <li>{{cssxref("background-repeat")}}：默认条件下，背景图片不断复制直到填满整个背景空间，在我们的例子中，背景图片只需复制一次，所以我们设置值为 <code>no-repeat</code>。</li> + </ul> + </li> +</ul> + +<p>效果显示如下：</p> + +<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> + +<h3 id="list-style_速记">list-style 速记</h3> + +<p>上述提到的三种属性可以用一个单独的速记属性 {{cssxref("list-style")}} 来设置。例如：</p> + +<pre class="brush: css">ul { + list-style-type: square; + list-style-image: url(example.png); + list-style-position: inside; +}</pre> + +<p>可以被如下方式代替：</p> + +<pre>ul { + list-style: square url(example.png) inside; +}</pre> + +<p>属性值可以任意顺序排列，你可以设置一个，两个或者三个值（该属性的默认值为 disc, none, outside），如果指定了 type 和 image，如果由于某种原因导致图像无法加载，则 type 将用作回退。</p> + +<h2 id="管理列表计数">管理列表计数</h2> + +<p>有时，您可能想在有序列表上进行不同的计数方式。例如： 从1以外的数字开始，或向后倒数，或者按步或多于1计数。HTML和CSS有一些工具可以帮助您</p> + +<h3 id="start">start</h3> + +<p>{{htmlattrxref("start","ol")}} 属性允许你从1 以外的数字开始计数。示例如下：</p> + +<pre class="brush: html"><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></pre> + +<p>输出的结果如下：</p> + +<p>{{ EmbedLiveSample('start', '100%', 150) }}</p> + +<h3 id="reversed">reversed</h3> + +<p>{{htmlattrxref("reversed","ol")}} 属性将启动列表倒计数。示例如下：</p> + +<pre class="brush: html"><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></pre> + +<p>输出的结果如下：</p> + +<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> + +<h3 id="value">value</h3> + +<p>{{htmlattrxref("value","ol")}} 属性允许设置列表项指定数值，示例如下:</p> + +<pre class="brush: html"><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></pre> + +<p>输出的结果如下：</p> + +<p>{{ EmbedLiveSample('value', '100%', 150) }}</p> + +<div class="note"> +<p><strong>注意</strong>: 纵然你使用非数字的 {{cssxref("list-style-type")}}, 你仍需要使用与数值同等意义的值作为 value 的属性。</p> +</div> + +<h2 id="主动学习_为嵌套式列表添加样式">主动学习: 为嵌套式列表添加样式</h2> + +<p>在该学习环节，我们希望你使用如上所学尝试为一个嵌套式列表添加样式。我们已经提供了 HTML , 在此之上请完成如下：</p> + +<ol> + <li>为该无序列表提供方形项目符号。</li> + <li>为该无序列表项和有序列表项提供基于其字体大小 1.5 的行高。</li> + <li>为有序列表提供小写字母的项目符号。</li> + <li>对列表进行自由发挥，尝试不同的项目符号类型，间距，以及其他的各种属性。</li> +</ol> + +<p>如果犯了错误，可以随时点击 Reset（重置） 按钮进行重新设置。如果你真的遇到困难无法继续下去，点击 Show solution（显示解决方案）按钮查看可行的解决方案。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> + <li>First, light the candle.</li> + <li>Next, open the box.</li> + <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: + <ol> + <li>The book of spells</li> + <li>The shiny rod</li> + <li>The goblin statue</li> + </ol> + </li> +</ul></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<p>CSS计数器提供用于自定义列表计数和样式的高级工具，但它们相当复杂。 如果你想更深入了解，请查看如下资源：</p> + +<ul> + <li>{{cssxref("@counter-style")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("counter-reset")}}</li> +</ul> + +<h2 id="总结">总结</h2> + +<p>一旦你掌握一些相关的基础原则和特定属性，列表的样式还是相对容易理解的。在下篇文章中我们将转到另一话题——为链接提供样式的各种技巧。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">在本测评中，通过对社区学校主页的文本样式化，我们会测试你对所有本模块涉及到的文本样式化技术的理解。你或许也会从中获得乐趣。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备条件:</th> + <td>在本次测评前，你应该完成了本模块所有章节。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>测试对CSS文本样式化技术的理解。</td> + </tr> + </tbody> +</table> + +<h2 id="开始">开始</h2> + +<p>在本测评开始前，你应该:</p> + +<ul> + <li>获取本次练习的 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> 文件以及提供的 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">external link icon</a>。</li> + <li>在本地计算机中拷贝一份上述文件。</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 或者，你可以使用像 <a class="external external-icon" href="http://jsbin.com/">JSBin</a> 或 <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> 的网站完成你的测评。你可以把HTML和CSS粘贴到在线编辑器中，并使用<a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">this URL</a>指定背景图像。如果你使用的在线编辑器没有单独的CSS面板，你可以将其放在HTML文件的<style>元素中。</p> +</div> + +<h2 id="项目简介">项目简介</h2> + +<p>你有一个虚构的社区大学主页的未处理HTML文件和一些CSS文件。这些CSS文件把网页分成两栏布局，提供了一些简单的样式化。你将在CSS文件底部的comment下写你的CSS，这样可以方便地标出你的工作。不要担心选择器一直重复；我们会帮你跳过这个问题。</p> + +<p>字体：</p> + +<ul> + <li>首先，下载一些免费的字体。因为这是一所大学，字体应该严肃，正式，给人信任的感觉 —— 主体使用serif字体，对标题结合使用sans-serif 或者 slab serif会是不错的选择。</li> + <li>使用合适的服务对着两种字体生成无死角的<code>@font-face</code>代码。</li> + <li>将你的body字体应用到body，heading字体应用到heading。</li> +</ul> + +<p>文本样式化基础：</p> + +<ul> + <li>设置全站网页 <code>font-size</code> 为 <code>10px</code>。</li> + <li>使用相对单位（relative unit）为标题和其他元素的font-sizes设置合适的值。</li> + <li>为body文本设置合适的<code>line-height</code>。</li> + <li>居中页面顶级标题。</li> + <li>为标题设置 <code>letter-spacing</code> 避免字间太过拥挤。</li> + <li>为body文本设置合适的 <code>letter-spacing</code> 和 <code>word-spacing</code>。</li> + <li>在<code><section></code>元素中，每个标题后的第一段文字设置20px的文本缩进。</li> +</ul> + +<p>链接：</p> + +<ul> + <li>设置 link, visited, focus, 和 hover 状态设置颜色，与页面顶部和底部的水平线颜色相匹配。</li> + <li>设置链接默认带下划线，但hover和focus时下划线消失。</li> + <li>取消页面中所有链接focus时默认的外边线。</li> + <li>设置active时有显著不同的样式，使其又突出又与整体页面设计和谐。</li> + <li>在外部链接右侧插入外部链接图标。</li> +</ul> + +<p>列表：</p> + +<ul> + <li>确保列表和列表项与页面整体样式和谐。每个列表项应该有同样的与段落行相同的<code>line-height</code> 。每个列表上下间距应该与段落间距相同。</li> + <li>使用与页面设计匹配的bullet列表项符号。你可以选择自定义的bullet图像或者其他的喜欢的bullet符号。</li> +</ul> + +<p>导航栏菜单:</p> + +<ul> + <li>样式化你的导航栏菜单，使它拥有与页面整体相匹配的外观。</li> +</ul> + +<h2 id="提示与技巧">提示与技巧</h2> + +<ul> + <li>本练习中你不需要编辑HTML文件。</li> + <li>你不需要使导航栏菜单看起来像按钮，但它需要有一定的高度才不至于在页面侧边看起来很别扭；同时记得，你需要的是一个垂直导航栏菜单。</li> +</ul> + +<h2 id="实例">实例</h2> + +<p>下图展示了其中一种设计完成后的例子。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> + +<h2 id="测评">测评</h2> + +<p>如果你将本测评作为课程的一部分，你应该能够将你的作品交给你的老师/指导员打分。如果你是自学的，你可以很轻松地在<a href="https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683">discussion thread for this exercise</a>，或者<a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC 频道上获得打分。先尝试完成本次练习——作弊是学不到任何东西的！</p> + +<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<h2 id="在本单元中">在本单元中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li> + <li><a href="https://developer.mozilla.org/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">在模块的第一篇文章中，我们探讨了用于样式化字体和文本的基本CSS特性。在这篇文章中，我们将更进一步，详细地探索web字体——它们允许您下载自定义字体和您的web页面，以允许更多不同的、自定义的文本样式。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>基本计算机素养，HTML 基础 (学习 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), CSS 基础 (学习<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">CSS文本和字体基础 </a>。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学习如何将web字体应用到web页面，使用第三方服务，或者编写自己的代码。</td> + </tr> + </tbody> +</table> + +<h2 id="字体种类回顾">字体种类回顾</h2> + +<p>正如我们在<a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">基本文本和字体样式</a>中所看到的那样，应用到您的HTML的字体可以使用 {{cssxref("font-family")}}属性来控制。您需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。</p> + +<pre class="brush: css">p { + font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>这个系统运行良好，但是对于传统的web开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Web-safe 字体</a>。您可以使用字体堆栈来指定可选择的字体，后面是Web-safe的替代选项，然后是默认的系统字体，但是为了确保您的设计在每种字体中都显示正常，这样增加了测试的开销。</p> + +<h2 id="Web_字体">Web 字体</h2> + +<p>但是还有一种选择，它非常有效，回到IE版本6。Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。太酷啦！所需的语法如下所示：</p> + +<p>首先，在CSS的开始处有一个{{cssxref("@font-face")}}块，它指定要下载的字体文件：</p> + +<pre class="brush: css">@font-face { + font-family: "myFont"; + src: url("myFont.ttf"); +} +</pre> + +<p>在这个下面，你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：</p> + +<pre class="brush: css">html { + font-family: "myFont", "Bitstream Vera Serif", serif; +}</pre> + +<p>语法确实比这更复杂，下面我们将详细介绍。</p> + +<p>关于网页字体有两件重要的事情要记住：</p> + +<ol> + <li>浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如,大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。</li> + <li>字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。</li> +</ol> + +<div class="note"> +<p><strong>注意：</strong> Web字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！</p> +</div> + +<h2 id="自主学习web字体示例">自主学习:web字体示例</h2> + +<p>记住这一点，让我们从最初的原则构建一个基本的web字体示例。使用嵌入的live示例很难演示这一点，因此，我们希望您按照下面几节中详细介绍的步骤来了解这个过程。</p> + +<p>你应该使用 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> 文件作为开始添加到你的代码中（又见<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">预览版</a>。）现在，在你的电脑上的一个新目录中复制这些文件。在 <code>web-font-start.css</code>文件中，您将找到一些最小的CSS来处理这个示例的基本布局和排版。</p> + +<h3 id="查找字体">查找字体</h3> + +<p>对于本例，我们将使用两种web字体，一种用于标题，另一种用于正文文本。首先，我们需要找到包含字体的字体文件。字体是由字体铸造厂创建的，并且存储在不同的文件格式中。<br> + 通常有三种类型的网站可以获得字体：</p> + +<ul> + <li>免费的字体经销商：这是一个可以下载免费字体的网站(可能还有一些许可条件，比如对字体创建者的信赖)。比如： <a href="https://www.fontsquirrel.com/">Font Squirre</a>，<a href="http://www.dafont.com/">dafont</a> 和 <a href="https://everythingfonts.com/">Everything Fonts</a>。</li> + <li>收费的字体经销商：这是一个收费则字体可用的网站，例如<a href="http://www.fonts.com/">fonts.com</a>或<a href="http://www.myfonts.com/">myfonts.com</a>。您也可以直接从字体铸造厂中购买字体，例如<a href="https://www.linotype.com/">Linotype</a>，<a href="http://www.monotype.com">Monotype</a> 或 <a href="http://www.exljbris.com/">Exljbris</a>。</li> + <li>在线字体服务：这是一个存储和为你提供字体的网站，它使整个过程更容易。更多细节见{{anch("Using an online font service")}}。</li> +</ul> + +<p>让我们找到一些字体！前往<a href="https://www.fontsquirrel.com/">Font Squirrel</a> 并选择两种字体——一种用于标题的有趣的字体(可能是一种不错的显示字体或无衬线字体)，和一种用于段落，稍微不那么华丽，更易于阅读的字体。当您找到每种字体时，按下下载按钮，并将该文件保存在与您先前保存的HTML和CSS文件相同的目录中。无论它们是TTF(True Type Fonts))还是OTF(Open Type字体)都不重要。</p> + +<p>在每种情况下，都要解压字体包(Web字体通常分布在包含字体文件和许可信息的ZIP文件中。)您可能会在包中发现多个字体文件，一些字体是作为一个具有不同变体的家庭分布的，例如，瘦、中、粗体、斜体、斜体等等。对于这个例子，我们只是想让您自己考虑一个单一的字体文件。</p> + +<div class="note"> +<p><strong>注意：</strong> 在右边栏的“查找字体”部分中，您可以单击不同的标记和分类来筛选显示的选项。</p> +</div> + +<h3 id="生成所需代码">生成所需代码</h3> + +<p>现在您需要生成所需的代码(以及字体格式)。对于每种字体，遵循以下步骤：</p> + +<ol> + <li>确保您已经满足了任何许可证的要求，如果您打算在一个商业和/或Web项目中使用它。</li> + <li>前往 Fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a>.</li> + <li>使用上传字体按钮上传你的两个字体文件。</li> + <li>勾选复选框，“是的，我上传的字体符合网络嵌入的合法条件。</li> + <li>点击下载你的套件（kit）。</li> +</ol> + +<p>在生成器完成处理之后，您应该得到一个ZIP文件，将它保存在与HTML和CSS相同的目录中。</p> + +<h3 id="在演示中实现代码">在演示中实现代码</h3> + +<p>在这一点上解压您刚刚生成的webfont套件。在解压的目录中，您将看到三个有用的条目：</p> + +<ul> + <li>每个字体的多个版本：（比如 <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>…… 随着浏览器支持需求的改变，提供的字体将随着时间的推移而不断更新。） 正如上面提到的，跨浏览器支持需要使用多种字体——这是Fontsquirrel的方法，确保你得到了你需要的一切。</li> + <li>每个字体的一个演示HTML文件在你的浏览器中加载，看看在不同的使用环境下字体会是什么样子。</li> + <li>一个 <code>stylesheet.css</code> 文件，它包含了你需要的生成好的 @font-face 代码。</li> +</ul> + +<p>要在演示中实现这些字体，请遵循以下步骤：</p> + +<ol> + <li>将解压缩的目录重命名为简易的目录，比如<code>fonts</code></li> + <li>打开 <code>stylesheet.css</code> 文件，把包含在你的网页中的 <code>@font-face</code>块复制到你的 <code>web-font-start.css</code> 文件—— 你需要把它们放在最上面，在你的CSS之前，因为字体需要导入才能在你的网站上使用。</li> + <li>每个<code>url()</code>函数指向一个我们想要导入到我们的CSS中的字体文件——我们需要确保文件的路径是正确的，因此，在每个路径的开头添加<code>fonts/</code> （必要时进行调整）。</li> + <li>现在，您可以在字体栈中使用这些字体，就像任何web安全或默认的系统字体一样。<br> + 例如： + <pre class="brush: css">font-family: 'zantrokeregular', serif;</pre> + </li> +</ol> + +<p>你应该得到一个演示页面，上面有一些漂亮的字体。因为不同字体的字体大小不同，你可能需要调整大小、间距等，以区分外观和感觉。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>注意：</strong>如果对于要让它正常工作您有任何问题，可以自由地将您的版本与我们完成的文件进行比较——见 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">运行完成的示例</a>)。</p> +</div> + +<h2 id="使用在线字体服务">使用在线字体服务</h2> + +<p>在线字体服务通常会为你存储和服务字体，这样你就不用担心写<code>@font-face</code>代码了，通常只需要在你的网站上插入一两行代码就可以让一切都运行。例子包括<a href="https://typekit.com/">Typekit</a> 和<a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>。大多数这些服务都是基于订阅的，除了<a href="https://www.google.com/fonts">Google Fonts</a>，这是一个有用的免费服务，特别是对于快速的测试工作和编写演示。</p> + +<p>大多数这些服务都很容易使用，所以我们不会详细地介绍它们。让我们快速浏览一下Google Fonts，这样你就能明白它的意思了。再次的，使用<code>web-font-start.html</code> 和 <code>web-font-start.css</code> a的副本作为你的开始。</p> + +<ol> + <li>前往 <a href="https://www.google.com/fonts">Google Fonts</a>.</li> + <li>使用左边的过滤器来显示你想要选择的字体类型，并选择一些你喜欢的字体。</li> + <li>要选择字体种类，按下按钮旁边的 ⊕ 按钮。</li> + <li>当您选择好字体种类时，按下页面底部的<em>[Number] </em>种类选择。</li> + <li>在生成的屏幕中，首先需要复制所显示的HTML代码行，并将其粘贴到HTML文件的头部。将其置于现有的{{htmlelement("link")}}元素之上，使得字体是导入的，然后在你的CSS中使用它。</li> + <li>然后，您需要将CSS声明复制到您的CSS中，以便将自定义字体应用到您的HTML。</li> +</ol> + +<div class="note"> +<p><strong>注意：</strong>如果你需要对比我们的，你可以在 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a>和<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>找到完整版本的。（<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">见预览版</a>）</p> +</div> + +<h2 id="关于font-face的更多细节">关于@font-face的更多细节</h2> + +<p>让我们来探索由fontsquirrel为您生成的<code>@font-face</code>语法。这是其中一个块的样子：</p> + +<pre class="brush: css">@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; +}</pre> + +<p>这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）", 这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>。让我们来看看它是怎么做的：</p> + +<ul> + <li><code>font-family</code>：这一行指定了您想要引用的字体的名称。你可以把它作为你喜欢的任何东西，只要你在你的CSS中始终如一地使用它。</li> + <li><code>src</code>：这些行指定要导入到您的CSS(<code>url</code>部分)的字体文件的路径，以及每种字体文件的格式(<code>format</code>部分)。后面的部分不是必要的，但是声明它是很有用的，因为它允许浏览器更快地找到可以使用的字体。可以列出多个声明，用逗号分隔——浏览器会搜索并使用它能找到的第一个——因此，最好是把新的、更好的格式比如WOFF2放在前面，把偏老的，不是那么好的格式像TTF这样的放在后面。唯一的例外是EOT字体——他们首先在旧版本的IE中修复了几个bug，这样它就会尝试使用它找到的第一件东西，即使它不能真正使用字体。</li> + <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: 这些行指定字体的粗细，以及它是否斜体。如果您正在导入相同字体的多个粗细，您可以指定它们的粗细/样式，然后使用不同的{{cssxref("font-weight")}}/{{cssxref("font-style")}}来选择它们之间的不同值，而不必调用字体种类不同名称的所有不同成员。Roger Johansson写的 <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face tip: define font-weight and font-style to keep your CSS simple</a> 更详细地说明了该做些什么。</li> +</ul> + +<div class="note"> +<p><strong>注意：</strong>您还可以为您的web字体指定特定的{{cssxref("font-variant")}} 和 {{cssxref("font-stretch")}} )值。在较新的浏览器中，您还可以指定一个{{cssxref("unicode-range")}}值，这是一个您需要使用什么web字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan写的<a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a>在如何利用这个问题上提供了一些有用的建议。</p> +</div> + +<h2 id="总结">总结</h2> + +<p>既然您已经完成了我们关于文本样式基础的文章，现在是时候用我们对模块的评估来测试您的理解了，为社区学校的主页进行排版。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> |