Web学习网站

Appearance

CSS 字体和文本样式 ​

CSS 字体和文本样式控制着网页中文本的外观，包括字体选择、大小、颜色、对齐方式、装饰等。这些属性对于创建美观且易读的网页至关重要。

字体相关属性 ​

font-family ​

font-family 属性指定元素中文本的字体。可以指定多个字体作为备选，浏览器会按顺序选择第一个可用的字体。

css
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

字体类型：

  • serif：衬线字体（如 Times New Roman）
  • sans-serif：无衬线字体（如 Arial, Helvetica）
  • monospace：等宽字体（如 Courier New）
  • cursive：手写体
  • fantasy：装饰字体

font-size ​

font-size 属性设置字体大小。

css
h1 {
  font-size: 2em;     /* 相对于父元素的字体大小 */
}

h2 {
  font-size: 1.5em;
}

p {
  font-size: 16px;    /* 像素值 */
}

.small {
  font-size: 0.875rem; /* 相对于根元素的字体大小 */
}

常用单位：

  • px：像素（绝对单位）
  • em：相对于父元素字体大小
  • rem：相对于根元素字体大小
  • %：百分比
  • pt：点（主要用于打印样式）

font-weight ​

font-weight 属性设置字体粗细。

css
.normal {
  font-weight: normal; /* 400 */
}

.bold {
  font-weight: bold;   /* 700 */
}

.light {
  font-weight: 300;
}

.thick {
  font-weight: 900;
}

font-style ​

font-style 属性设置字体风格。

css
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

font-variant ​

font-variant 属性设置小型大写字母字体。

css
.normal {
  font-variant: normal;
}

.small-caps {
  font-variant: small-caps;
}

font ​

font 是字体相关属性的简写。

css
.text {
  font: italic bold 1.2em "Helvetica Neue", sans-serif;
}

/* 语法顺序：
   font-style font-variant font-weight font-size/line-height font-family */

文本相关属性 ​

color ​

color 属性设置文本颜色。

css
.red {
  color: red;
}

.hex {
  color: #ff0000;
}

.rgb {
  color: rgb(255, 0, 0);
}

.rgba {
  color: rgba(255, 0, 0, 0.8);
}

.hsl {
  color: hsl(0, 100%, 50%);
}

text-align ​

text-align 属性设置文本的水平对齐方式。

css
.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.justify {
  text-align: justify; /* 两端对齐 */
}

text-decoration ​

text-decoration 属性设置文本装饰线。

css
.none {
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

.line-through {
  text-decoration: line-through;
}

.custom {
  text-decoration: underline dotted red;
}

text-transform ​

text-transform 属性控制文本的大小写。

css
.none {
  text-transform: none;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize; /* 首字母大写 */
}

text-indent ​

text-indent 属性设置文本首行缩进。

css
.paragraph {
  text-indent: 2em;
}

letter-spacing ​

letter-spacing 属性设置字符间距。

css
.wide {
  letter-spacing: 2px;
}

.tight {
  letter-spacing: -1px;
}

word-spacing ​

word-spacing 属性设置单词间距。

css
.wide {
  word-spacing: 5px;
}

line-height ​

line-height 属性设置行高。

css
.single {
  line-height: 1;     /* 无行间距 */
}

.normal {
  line-height: normal; /* 浏览器默认 */
}

.spaced {
  line-height: 1.5;   /* 1.5倍行高 */
}

.fixed {
  line-height: 24px;  /* 固定像素值 */
}

vertical-align ​

vertical-align 属性设置元素的垂直对齐方式。

css
.baseline {
  vertical-align: baseline;
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

.bottom {
  vertical-align: bottom;
}

.super {
  vertical-align: super;
}

.sub {
  vertical-align: sub;
}

文本溢出处理 ​

white-space ​

white-space 属性控制空白符的处理方式。

css
.nowrap {
  white-space: nowrap; /* 不换行 */
}

.pre {
  white-space: pre; /* 保留空白符和换行符 */
}

.pre-wrap {
  white-space: pre-wrap; /* 保留空白符和换行符，允许换行 */
}

.pre-line {
  white-space: pre-line; /* 合并空白符，保留换行符 */
}

text-overflow ​

text-overflow 属性设置文本溢出时的处理方式。

css
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 显示省略号 */
}

实际示例 ​

基本文本样式 ​

<div class="text-example">
  <h1>标题文本</h1>
  <p class="intro">这是介绍性段落，使用了特殊样式。</p>
  <p>这是普通段落文本，展示了基本的文本样式效果。</p>
  <p class="highlight">这段文本有特殊的高亮效果。</p>
</div>
.text-example {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.text-example h1 {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 1.5rem;
}

.text-example .intro {
  font-size: 1.2rem;
  font-style: italic;
  color: #7f8c8d;
  text-align: center;
}

.text-example .highlight {
  color: #e74c3c;
  font-weight: bold;
}

文本装饰和变换 ​

<div class="decoration-example">
  <p class="underlined">这段文本有下划线</p>
  <p class="overlined">这段文本有上划线</p>
  <p class="strikethrough">这段文本有删除线</p>
  <p class="uppercase">这段文本全部大写</p>
  <p class="lowercase">THIS TEXT IS LOWERCASE</p>
  <p class="capitalize">this text is capitalized</p>
</div>
.decoration-example p {
  margin: 10px 0;
}

.underlined {
  text-decoration: underline;
}

.overlined {
  text-decoration: overline;
}

.strikethrough {
  text-decoration: line-through;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

响应式字体大小 ​

.responsive-text {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .responsive-text {
    font-size: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .responsive-text {
    font-size: 1.25rem;
  }
}

Web 字体 ​

使用 Google Fonts ​

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
css
.web-font {
  font-family: 'Roboto', sans-serif;
}

使用 @font-face ​

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.custom-text {
  font-family: 'MyCustomFont', Arial, sans-serif;
}

浏览器兼容性 ​

大多数字体和文本样式属性在所有现代浏览器中都有很好的支持。一些较新的属性（如 text-overflow）在较老的浏览器中可能需要前缀或有兼容性问题。

最佳实践 ​

  1. 字体选择：选择易读且适合内容的字体
  2. 字体大小：确保文本在各种设备上都易于阅读
  3. 行高：合适的行高能显著提高文本可读性
  4. 对比度：确保文本与背景有足够的对比度
  5. Web 字体：谨慎使用 Web 字体，注意加载性能
  6. 响应式字体：在不同屏幕尺寸上调整字体大小

总结 ​

CSS 字体和文本样式是网页设计的基础，它们直接影响内容的可读性和用户体验。通过合理使用这些属性，可以创建美观、易读且具有视觉吸引力的网页文本内容。掌握这些属性对于任何前端开发者来说都是必不可少的技能。