上一节:
下一节:

  CSS 字体

  • CSS字体系列

    CSS字体属性定义字体系列，粗体，大小和文本样式。 在CSS中，有两种类型的字体系列名称：
    • generic family - 一组具有相似外观的字体系列（如“Serif”或“Monospace”）
    • font family - 特定的字体系列（如“Times New Roman”或“Arial”）
    Generic family Font family 描述
    Serif Times New Roman Georgia Serif 字体在某些字符的末尾有小线条
    Sans-serif Arial Verdana “Sans”的意思是没有 - 这些字体在字符的结束没有小线条
    Monospace Courier New Lucida Console 所有的单空间字符都具有相同的宽度
    注意：在计算机屏幕上，sans-serif字体被认为比serif字体更容易阅读。

  • 字体系列

    font-family属性设置文本的字体系列。font-family属性应该包含多个字体名称作为“后备”系统。如果浏览器不支持第一种字体，它会尝试下一种字体，依此类推。从您想要的字体开始，以一般系列结束，让浏览器在通用系列中选择类似的字体，如果没有其他字体可用。 注意：如果字体系列的名称不止一个字，则必须使用引号，例如：“Times New Roman”。 在以逗号分隔的列表中指定了多个字体系列： 
    p.serif {
 font-family: "Times New Roman", Times, serif;
}

p.sansserif {
 font-family: Arial, Helvetica, sans-serif;
}
    尝试一下

  • 字体样式

    font-style属性主要用于指定斜体文本。此属性有三个值：
    • normal - 文本正常显示
    • italic - 文本以斜体显示
    • oblique - 文本是“倾斜”（倾斜非常类似于斜体，但支持较少）
    p.normal {
 font-style: normal;
}

p.italic {
 font-style: italic;
}

p.oblique {
 font-style: oblique;
}
    尝试一下

  • 字体大小

    font-size属性设置文本的大小。能够管理文本大小在网页设计中很重要。但是，您不应该使用字体大小调整来使段落看起来像标题，或标题看起来像段落。始终使用正确的HTML标记，例如<h1> - <h6>作为标题，<p>作为段落。font-size值可以是绝对值或相对大小。 绝对尺寸：
    • 将文本设置为指定的大小
    • 不允许用户在所有浏览器中更改文本大小（由于可访问性原因而不好）
    • 当已知输出的物理尺寸时，绝对尺寸很有用
    相对大小：
    • 设置相对于周围元素的大小
    • 允许用户更改浏览器中的文本大小
    注意：如果未指定字体大小，则普通文本的默认大小（如段落）为16px（16px = 1em）。

    用像素设置字体大小

    h1 {
         font-size: 40px;
       }

       h2 {
         font-size: 30px;
       }

       p {
         font-size: 14px;
       }
    尝试一下
    提示：如果使用像素，仍可以使用缩放工具调整整个页面的大小。

    用Em设置字体大小

    为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用em而不是像素。W3C推荐使用em size单元。1em等于当前的字体大小。浏览器中的默认文本大小为16px。因此，1em的默认大小为16px。可以使用以下公式从像素到em计算大小：pixels/16 = em 
    h1 {
         font-size: 2.5em; /* 40px/16=2.5em */
       }

       h2 {
         font-size: 1.875em; /* 30px/16=1.875em */
        }

       p {
         font-size: 0.875em; /* 14px/16=0.875em */
       }
    尝试一下
    在上面的示例中，em中的文本大小与前一个示例中的文本大小（以像素为单位）相同。但是，使用em大小，可以在所有浏览器中调整文本大小。不幸的是，旧版本的IE仍然存在问题。文本变得比变大时要大，并且比变小时要小。

    使用百分比和Em的组合

    适用于所有浏览器的解决方案是为<body>元素设置默认的字体大小（以百分比表示）： 
    body {
         font-size: 100%;
       }

       h1 {
         font-size: 2.5em;
       }

       h2 {
         font-size: 1.875em;
       }

       p {
         font-size: 0.875em;
       }
    尝试一下
    我们的代码现在很棒！它在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小！

  • 字体权重

    font-weight属性指定字体的权重： 
    p.normal {
         font-weight: normal;
       }

       p.light {
         font-weight: lighter;
       }

       p.thick {
         font-weight: bold;
       }

       p.thicker {
         font-weight: 900;
       }
    尝试一下

  • 响应字体大小

    可以使用vw单位设置文本大小，这意味着“视口宽度”。这样文本大小将遵循浏览器窗口的大小： 
    <h1 style="font-size:10vw;">响应文本</h1>
    尝试一下
    Viewport是浏览器窗口大小。1vw=视口宽度的1％。如果视口宽50厘米，则1vw为0.5厘米。

  • 字体变体

    font-variant属性指定文本是否应以小型大写字体显示。在小型大写字体中，所有小写字母都转换为大写字母。但是，转换后的大写字母显示的字体大小小于文本中的原始大写字母。 
    p.normal {
             font-variant: normal;
           }

           p.small {
             font-variant: small-caps;
           }
    尝试一下

  • 所有CSS边框属性

    属性 描述
    font 在一个声明中设置所有字体属性
    font-family 指定文本的字体系列
    font-size 指定文本的字体大小
    font-style 指定文本的字体样式
    font-variant 指定文本是否应该以小写字体显示
    font-weight 指定字体的权重

  • 相关页面

    HTML教程：HTML样式
上一节:
下一节: