CSS中样式文本涉及到什么？

正如你已经在使用HTML和CSS工作中经历过的，元素内部的文本被放置在元素的内容框中。 它从内容区域的左上角(或右上角，在RTL语言内容的情况下)开始，并流向行尾。 一旦它到达结束，它下来到下一行并继续，然后下一行，直到所有的内容被放置在框中。 文本内容有效地表现为一系列内联元素，布置在彼此相邻的线上，并且在到达线的末尾之前不创建换行符，或者除非使用 //developer.mozilla.org/zh-CN/docs/Web/HTML/Element/br"> < br> 元素。

用于样式文本的CSS属性通常分为两类，我们将在本文中单独查看:

• Font styles: Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.
• Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box.

字体

让我们直接查看字体样式的属性。 在这个例子中，我们将对同一个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>

您可以在Github上找到完成的示例(另请参阅 a href ="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html"class ="external">源代码)。

颜色

color 属性设置前景内容的颜色 所选择的元素(通常是文本，但也可以包括一些其他东西，例如使用 docs / Web / CSS / text-decoration"> text-decoration 属性)。

color 可接受任何 CSS颜色单位，例如:

p {
  color: red;
}

这将导致段落变为红色，而不是标准浏览器默认黑色，如此:

<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>

字体系列

要在文本上设置不同的字体，请使用 font-family 代码> 属性 - 这允许您指定浏览器应用于所选元素的字体(或字体列表)。 浏览器只会应用一种字体，如果它是可用的机器上的网站被访问; 如果没有，则只使用浏览器默认字体。 一个简单的例子如下:

p {
  font-family: arial;
}

这将使页面上的所有段落采用任何计算机上可以找到的arial字体。

Web safe fonts

说到字体可用性，只有一定数量的字体通常可用于所有系统，因此可以毫不费力地使用。 这些是所谓的网络安全字体。

大多数时候，作为web开发人员，我们希望对用于显示我们的文本内容的字体有更具体的控制。 问题是找到一种方法来知道在用于查看我们的网页的计算机上可用的字体。 在每种情况下都没有办法知道这一点，但是网络安全字体已知在最常用的操作系统(Windows，Mac，最常见的Linux发行版，Android和iOS)的几乎所有实例上都可用。

实际的网络安全字体的列表将随着操作系统的发展而改变，但是可以考虑以下网络安全的网络，至少现在(许多已经由于Microsoft //en.wikipedia.org/wiki/Core_fonts_for_the_Web"class ="external"> Web上的核心字体 在90年代末和21世纪初)

Default fonts

CSS为字体定义了五个通用名称: serif ， sans-serif， style ="font-family:Open Sans，Arial，sans-serif;"> monospace ， cursive和 这些是非常通用的，使用这些通用名称时使用的确切字体由每个浏览器决定，并且可能因为它们正在运行的每个操作系统而有所不同。 它表示最糟糕的情况，其中浏览器将尽力提供至少一个看起来合适的字体。 serif ， sans-serif 和 monospace 是可以预测的，应该提供一些合理的。 另一方面， cursive 和 fantasy 不太可预测，我们建议非常仔细地使用它们，随时测试。

五个名称定义如下:

Font stacks

由于您无法保证要在网页上使用的字体的可用性(甚至网络字体可能由于某种原因而失败)，您可以提供字体堆栈 使浏览器有多种字体可供选择。 这只涉及一个由多个字体名称组成的 font-family 值，用逗号分隔。

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

在这种情况下，浏览器在列表的开始处开始，并查看该字体在机器上是否可用。 如果是，则将该字体应用于所选元素。 如果没有，它会移动到下一个字体，等等。

在堆栈的末尾提供一个合适的通用字体名称是一个好主意，因此如果没有列出的字体可用，浏览器至少可以提供大致合适的东西。 为了强调这一点，段落给出了浏览器的默认衬线字体如果没有其他选项可用 - 这通常是时间新罗马 - 这是没有好的无衬线字体！

A font-family example

让我们加入我们前面的例子，给段落一个sans-serif字体:

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

这给我们以下结果:

<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>

字体大小

在我们上一个模块的 CSS值和单元文章中，我们查看了 长度和大小单位。 字体大小(使用 font-size 设置) 属性)可以采用大多数这些单位(以及其他单位，例如百分比)衡量的值，但最常见的单位 你将使用的大小文本是:

• px (pixels): The number of pixels high you want the text to be. This is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation.
• ems: 1em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. Why bother? It is quite natural once you get used to it, and you can use ems to size everything, not just text. You can have an entire website sized using ems, which makes maintenance easy.
• rems: These work just like ems, except that 1rem is equal to the font size set on the root element of the document (i.e. <html>), not the parent element. This makes doing the maths to work out your font sizes much easier, but unfortunately rems are not supported in Internet Explorer 8 and below. If you need to support older browsers with your project, you can either stick to using ems or px, or use a polyfill such as REM-unit-polyfill. 

元素的 font-size 继承自该元素的父元素。 这一切都从整个文档的根元素开始 - < html> - 其中的 font-size 在各浏览器中设置为16像素。 根元素内的任何段落(或其他没有由浏览器设置的大小的元素)的最终大小为16像素。 其他元素可能有不同的默认尺寸，例如 < h1> 代码> 元素的大小默认为2ems，因此最终大小为32px。

当你开始改变嵌套元素的字体大小时，事情变得更加棘手。 例如，如果您有 < article> a>元素，并将其字体大小设置为 1.5em s(这将计算为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 。 数学可能是复杂的，所以你需要小心你如何风格的东西。 最好是使用可能的地方，保持简单，避免在可能的情况下设置容器元素的字体大小。

A simple sizing example

在调整文本大小时，通常最好将文档的基本 font-size 设置为10px，这样数学很容易解决 - 必需(r)em值 然后是像素字体大小除以10，而不是16.在这之后，你可以很容易地将不同的类型，如果文档中的文本大小到你想要的大小。 最好将所有 font-size 规则集列在样式表的指定区域，以便于查找。

我们的新结果如下:

<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>

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

字体样式，字体重量，文本变换和文本装饰

CSS提供了四个常见属性来改变文本的视觉重量/强调:

• font-style: Used to turn italic text on and off. Possible values are as follows (you'll rarely use this, unless you want to turn some italic styling off for some reason):
  • normal: Sets text to normal font (turns existing italics off.)
  • italic: Sets text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.
  • oblique: Sets text to use a simulated version of an italic font, created by slanting the normal version.
• font-weight: Sets how bold the text is. This has many available values available in case you have many font variants available (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you'll rarely use any of them except for normal and bold:
  • normal, bold: Normal and bold font weight
  • lighter, bolder: Sets the current element's boldness to be one step lighter or heavier than its parent element's boldness.
  • 100–900: Numeric boldness values that provide finer grained control than the above keywords, if needed. 
• text-transform: Allows you to set your font to be transformed. Values include:
  • none: Prevents any transformation.
  • uppercase: Transforms all text to capitals.
  • lowercase: Transforms all text to lower case.
  • capitalize: Transforms all words to have the first letter capitalized.
  • full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. latin characters along with asian language glyphs (like Chinese, Japanese, Korean.)
• text-decoration: Sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them.) Available values are:
  • none: Unsets any text decorations already present.
  • underline: Underlines the text.
  • overline: Gives the text an overline.
  • line-through: Puts a strikethrough over the text.
  You should note that text-decoration can accept multiple values at once, if you want to add multiple decorations simultaneously, for example text-decoration: underline overline. Also note that text-decoration is a shorthand property for text-decoration-line, text-decoration-style, and text-decoration-color. You can use combinations of these property values to create interesting effects, for example text-decoration: line-through red wavy.

让我们看看添加一些这些属性到我们的例子:

我们的新结果如下:

<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>

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;
}

文本投影

您可以使用 text-shadow 对文字应用阴影， 属性。 这最多可以有四个值，如下面的示例所示:

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

四个属性如下:

1. The horizontal offset of the shadow from the original text — this can take most available CSS length and size units, but you'll most comonly use px. This value has to be included.
2. The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.
3. The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS length and size units.
4. The base color of the shadow, which can take any CSS color unit. If not included, it defaults to black.

Multiple shadows

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

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);

如果我们将此应用于 < h1> >元素在我们的Tommy的猫的例子，我们将最终与这:

<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>

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;
}

文本布局

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

文本对齐

text-align 属性用于控制 如何在其包含的内容框中对齐文本。 可用的值如下，并且工作方式与在常规字处理器应用程序中的工作方式大致相同:

• left: Left justifies the text.
• right: Right justifies the text.
• center: Centers the text.
• justify: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such as hyphens, to break some of the longer words across lines.

如果我们将 text-align:center; 应用于 >< h1> ，我们最终会得到这样的结果:

<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>

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 属性设置 每行文字 - 这可以采用大多数长度和大小单位，但也可以采用无单位值，其作用是 一个乘数，通常被视为最佳选项 - font-size > 乘以 line-height 。 身体文本通常看起来更好，当线间隔开时更容易阅读; 推荐的行高约为1.5-2(双倍间距)。因此，要将文本行设置为字体高度的1.5倍，您可以使用:

line-height: 1.5;

将其应用于 < p> 元素 在我们的例子中会给我们这个结果:

<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>

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;
}

字母和字间距

letter-spacing 和 "https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-spacing"> word-spacing 属性允许您设置字母之间的间距和 词在您的文本。 你不会经常使用这些，但可能会找到用于他们获得一定的外观，或提高一个特别密集的字体的易读性。 他们可以使用大多数长度和大小单位。

例如，如果我们将以下内容应用到 < ; p> 元素:

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

我们会得到以下结果:

<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>

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;
}

其他属性值得一看

上述属性为您提供了如何在网页上开始设置文本样式的想法，但还有更多的属性可以使用。 我们只是想覆盖这里最重要的。 一旦您习惯使用上述内容，您还应该了解以下内容:

字体样式:

• font-variant: Switch between small caps and normal font alternatives.
• font-kerning: Switch font kerning options on and off.
• font-feature-settings: Switch various OpenType font features on and off.
• font-variant-alternates: Control the use of alternate glyphs for a given font-face.
• font-variant-caps: Control the use of alternate capital glyphs.
• font-variant-east-asian: Control the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.
• font-variant-ligatures: Control which ligatures and contextual forms are used in text.
• font-variant-numeric: Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.
• font-variant-position: Control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript.
• font-size-adjust: Adjust the visual size of the font independently of its actual font size.
• font-stretch: Switch between possible alternative stretched versions of a given font.
• text-underline-position: Specify the position of underlines set using the text-decoration-line property underline value.
• text-rendering: Try to perform some text rendering optimization.

文本布局样式

• text-indent: Specify how much horizontal space should be left before the beginning of the first line of the text content.
• text-overflow: Define how overflowed content that is not displayed is signaled to users.
• white-space: Define how whitespace and associated line breaks inside the element are handled.
• word-break: Specify whether to break lines within words.
• direction: Define the text direction (This depends on the language and usually it's better to let HTML handle that part as it is tied to the text content.)
• hyphens: Switch on and off hyphenation for supported languages.
• line-break: Relax or strengthen line breaking for Asian languages.
• text-align-last: Define how the last line of a block or a line, right before a forced line break, is aligned.
• text-orientation: Define the orientation of the text in a line.
• word-wrap: Specify whether or not the browser may break lines within words in order to prevent overflow.
• writing-mode: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.

字体缩写

许多字体属性也可以通过缩写属性 字体 >。 这些按照以下顺序编写: font-style a>， font-variant ， href ="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight"> font-weight ， //developer.mozilla.org/zh-CN/docs/Web/CSS/font-stretch"> font-stretch ， .org / zh-CN / docs / Web / CSS / font-size"> font-size ， CN / docs / Web / CSS / line-height"> line-height 和 Web / CSS / font-family"> font-family 。

在所有这些属性中，使用 font 速记属性时只需要 font-size 和 font-family 。

正斜杠必须放在 font-size 之间， 和 line-height 属性 。

完整的示例如下所示:

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

主动学习:使用样式文本

在这个主动的学习课程，我们没有任何具体的练习，你可以做:我们只是希望你有一个很好的游戏与一些字体/文本布局属性，看看你可以生产！ 您可以使用离线HTML / CSS文件执行此操作，也可以在下面的可编辑实例中输入代码。

如果发生错误，您可以随时使用重置按钮重置。

<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>

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);

概要

我们希望你喜欢在这篇文章中玩文字！ 下一篇文章将给你所有你需要知道的样式HTML列表。