青少年编程与数学 01-006 设计网页的外观 11课题、字体2_1

本文介绍CSS字体属性的使用。

“字体是印刷术的灵魂。”
“Type is the soul of printing.”
—— 埃里克·吉尔 (Eric Gill) | 英国雕塑家、字体设计师 | 1882 ~ 1940

“一个好的字体设计应该像好的音乐一样，即使在重复听时也不失其魅力。”
“A good typeface is like good music, it should be enjoyable even when repeated.”
—— 赫尔曼·扎普夫 (Hermann Zapf) | 德国字体设计师 | 1918 ~ 2015

“字体是书籍的面孔，它们传达了文字的情感和语境。”
“Typefaces are the face of a book, they convey the emotion and context of the text.”
—— 罗伯特·布林赫尔 (Robert Bringhurst) | 加拿大诗人、排版设计师 | 1946 ~ 至今

“在设计中，字体的选择可以改变一切。”
“In design, the choice of type can change everything.”
—— 保罗·兰德 (Paul Rand) | 美国平面设计师 | 1914 ~ 1996

课题摘要

本文介绍CSS字体属性的使用。

课题要求

1. 理解字体在网页设计中的重要性。
2. 掌握编写网页时字体的使用方法。
3. 掌握在网页中使用外部字体的方法。

一、CSS 字体

CSS字体属性定义字体，加粗，大小，文字样式。

选择正确的字体会对网站的用户体验产生巨大影响。正确的字体可以为您的品牌创造强有力的形象。使用易于阅读的字体很重要。字体为您的文本增加了价值。为字体选择正确的颜色和文本大小也很重要。

CSS3提供了丰富的字体属性，使得网页设计师能够对文本的外观进行精细的控制。以下是CSS3中一些关键的字体相关属性的详细解释：

1. font-family

   • 用于设置字体家族。你可以指定一系列的字体名称，浏览器会按照顺序选择可用的字体。例如：

     body {
       font-family: 'Arial', sans-serif;
     }
     

   • 如果使用的是特殊字体，需要通过@font-face规则将其加载到网站上。

2. font-size

   • 设定文本的大小。可以使用绝对单位如px、pt，也可以使用相对单位如em、rem、vw、vh等。

     h1 {
       font-size: 2em;
     }
     

3. font-weight

   • 控制文本的粗细。可以使用关键字如normal、bold、bolder、lighter，或者使用数值从100到900。

     strong {
       font-weight: bold;
     }
     

4. font-style

   • 定义字体风格，可以是normal、italic或oblique。

     em {
       font-style: italic;
     }
     

5. font-variant

   • 用于小写字母的显示方式，如small-caps。

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

6. font-stretch

   • 控制字体的宽窄，可以是ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded或ultra-expanded。

7. font-feature-settings

   • 允许控制字体的OpenType特性，比如连字、分数、序数等。

     p {
       font-feature-settings: "liga", "kern";
     }
     

8. font-kerning

   • 控制字母间距调整。

     body {
       font-kerning: auto;
     }
     

9. font-size-adjust

   • 保持x-height（x的高度）不变的情况下改变字体大小。

10. font-smooth

    • 控制字体平滑度，但在现代浏览器中已被废弃。

11. font-display

    • 控制@font-face定义的字体如何显示在页面上，特别是在字体加载过程中。

12. text-shadow

    • 给文本添加阴影，增强视觉效果。

      h1 {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }
      

13. @font-face

    • 定义自定义字体文件，使得网页可以使用服务器上的字体。

      @font-face {
        font-family: 'MyFont';
        src: url('myfont.eot');
        src: local('☺'),
             url('myfont.woff') format('woff'),
             url('myfont.ttf') format('truetype'),
             url('myfont.svg#MyFont') format('svg');
        font-weight: normal;
        font-style: normal;
      }
      

以上属性可以组合使用在一个font简写属性中，但要注意它们的顺序。例如：

h1 {
  font: bold italic 2em/1.5 'Arial', sans-serif;
}

这里的font属性按以下顺序设置：

1. font-style
2. font-variant
3. font-weight
4. font-size
5. line-height
6. font-family

请注意，不是所有的属性都可以在所有浏览器中完全兼容，因此在实际开发中应检查跨浏览器的兼容性。

二、通用字体族

通用字体族（Generic Font Families）是在CSS中定义的一组预设的字体分类，它们被设计用来提供跨平台和跨设备的文本渲染一致性。当指定通用字体族时，浏览器会选择最适合当前环境的字体，这样可以确保即使在没有特定字体可用的情况下，文本仍然可读并且看起来专业。

以下是CSS中定义的五种通用字体族：

1. Serif（衬线字体）

   • 这类字体在每个字母的边缘都有一个小的笔触，营造出一种形式感和优雅感。常见的Serif字体包括 Times New Roman、Georgia 和 Palatino。

2. Sans-serif（无衬线字体）

   • 字体线条简洁，没有额外的小笔画。它们营造出现代而简约的外观。常见的Sans-serif字体有 Arial、Helvetica 和 Verdana。

3. Monospace（等宽字体）

   • 这类字体的所有字母和符号都有相同的宽度，类似于打字机的输出，常用于代码展示。常见的Monospace字体包括 Courier New 和 Consolas。

4. Cursive（草书字体）

   • 这类字体模仿了人类的手写笔迹，给人以个人化和艺术的感觉。常见的Cursive字体有 Comic Sans MS 和 Brush Script MT。

5. Fantasy（幻想字体）

   • 这是一种装饰性和趣味性的字体，通常用于标题或特殊的文本设计。常见的Fantasy字体有 Impact 和 Western。

在CSS中使用通用字体族的例子：

body {
  font-family: sans-serif; /* 使用无衬线字体 */
}

code {
  font-family: monospace; /* 使用等宽字体 */
}

除了这五种标准的通用字体族，CSS还引入了 system-ui 字体族，它代表了操作系统的UI字体，旨在提供与系统界面一致的外观。

body {
  font-family: system-ui, sans-serif; /* 使用系统UI字体，回退到无衬线字体 */
}

使用通用字体族是一个好习惯，因为它可以确保在任何用户的设备上都能有可接受的文本显示效果。