CSS 字体(font)实例

CSS 字体(font)实例
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
CSS 字体系列
在 CSS 中，有两种不同类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体
CSS 字体属性
属性 描述
font   简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family    设置字体系列。
font-size  设置字体的尺寸。
font-size-adjust   当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch   对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant   以小型大写字体或者正常字体显示文本。
font-weight    设置字体的粗细。
######
family-name
generic-family
用于某个元素的字体族名称或/及类族名称的一个优先表。

默认值：取决于浏览器。

inherit    规定应该从父元素继承字体系列。


值  描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique    浏览器会显示一个倾斜的字体样式。
inherit    规定应该从父元素继承字体样式。

1.设置文本的字体
本例演示如何设置文本字体。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p.serif{font-family:"Times NEW Roman",Georgia,Serif}
        p.sansserif{font-family:Arial,Verdana,Sans-serif}
    </style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph,shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>

2.设置字体尺寸
本例演示如何设置字体尺寸。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1 {font-size: 300%}
        h2 {font-size: 200%}
        p {font-size: 100%}
    </style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>

</body>

3.设置字体风格
本例演示如何设置字体风格。
    <style type="text/css">
        p.normal {font-style: normal}
        p.italic {
            font-style: italic;}
        p.oblique {
            font-style:oblique;
        }
    </style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">THis is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>

4.设置字体的异体
本例演示如何设置字体的异体。
    <style type="text/css">
        p.normal {font-variant: normal}
        p.small {font-variant: small-caps}
    </style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>

5.设置字体的粗细
本例演示如何设置字体的粗细。
    <style type="text/css">
        p.normal {font-weight:normal}
        p.thick {font-weight: bold}
        p.thicker {font-weight:900}
    </style>
</head>
<body>

<p class="normal">This is a paragraph</p>

<p class="thick">This is a paragraph</p>

<p class="thicker">This is a paragraph</p>

</body>

6.所有字体属性在一个声明之内
本例演示如何使用简写属性将字体属性设置在一个声明之内。

    <style type="text/css">
        p.ex1{font: italic arial,sans-serif;}
        p.ex2{font:italic bold 12px/30px arial,sans-serif;}
    </style>
</head>
<body>
<p class="ex1">is a paragraph. This is a paragraph. This is a paragraph. </p>
<p class="ex2"> is a paragraph. This is a paragraph.</p>
</body>
猜你喜欢
