HTML Dog
跳至导航

文本

您可以使用一系列属性来更改网页中文本的大小和形状。

font-family

这是字体本身,例如 Times New Roman、Arial 或 Verdana。

用户浏览器必须能够找到您指定的字体,在大多数情况下,这意味着该字体必须位于他们的计算机上,因此使用只存在于的计算机上的晦涩字体几乎没有意义。有少数“安全”字体(最常用的是 Arial、Verdana 和 Times New Roman),但您可以指定多个字体,用逗号分隔。这样做的目的是,如果用户没有您指定的第一个字体,浏览器就会遍历列表,直到找到它拥有的字体。这很有用,因为不同的计算机有时会安装不同的字体。因此,font-family: arial, helvetica, serif 会首先查找 Arial 字体,如果浏览器找不到,它会搜索 Helvetica,然后是一个常见的衬线字体。

注意:如果字体名称包含多个单词,它应该放在引号中,例如 font-family: "Times New Roman"

font-size

font-size 设置字体大小。要注意这一点——像标题这样的文本不应该只是一个具有大字体的 HTML 段落(p)——您仍然应该使用标题(h1h2 等),即使实际上您可以将段落的字体大小设置得比标题大(对于明智的人来说不推荐)。

font-weight

font-weight 指定文本是否为粗体。最常用的是 font-weight: boldfont-weight: normal,但其他值有 bolderlighter100200300400(与 normal 相同)、500600700(与 bold 相同)、800900

font-weightfont-stylefont-varianttext-transform

font-style

font-style 指定文本是否为斜体。它可以是 font-style: italicfont-style: normal

text-decoration

text-decoration 指定文本下方、上方或中间是否有线条。

此属性通常用于装饰链接,您可以使用 text-decoration: none 指定无下划线。

text-transform

text-transform 将更改文本的大小写。

所以,将其中一些结合起来可能会是这样的


body {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

a {
    text-decoration: none;
}

strong {
    font-style: italic;
    text-transform: uppercase;
}

文本间距

在我们继续介绍文本样式之前,快速看一下如何调整页面上的文本间距。

文本间距

letter-spacingword-spacing 属性用于调整字母或单词之间的间距。值可以是长度或 normal

line-height 属性设置元素(如段落)中行的高度,而不调整字体大小。它可以是数字(表示字体大小的倍数,例如“2”将是字体大小的两倍)、长度、百分比或 normal

text-align 属性将元素内的文本对齐到左、右、中心或两端对齐。

text-indent 属性将段落的第一行缩进指定的长度或百分比。这是一种传统上用于印刷的样式,但在 Web 等数字媒体中很少使用。


p {
    letter-spacing: 0.5em;
    word-spacing: 2em;
    line-height: 1.5;
    text-align: center;
}