CSS的字体

1.设置文本的字体

p.serif {
    font-family:'Times New Roman', Times, serif;
}
p.sansserif {
    font-family: Arial, Helvetica, sans-serif;
 }

<body>
<h1>CSS font-falily</h1>
<p class="serif">这一段的字体是Times New Roman</p>
<p class="sansserif">这一段的字体是Arial</p>
</body>

2.设置字体大小

h1 {
    font-size: 250%;
}
h2 {
    font-size: 200%;
}
p {
    font-size: 100%;
}

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>

3.用px设置的字体的大小

h1{
    font-size: 50px;
}
h2 {
    font-size: 40px;
}
p {
    font-size: 12px;
}

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>
<p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p>
</body>

4.用em设置的字体的大小

h1{
    font-size: 3.125em; /* 50px/16=3.125em*/
}
h2 {
    font-size: 2.5em; /* 40px/16=2.5em*/
}
p {
    font-size: 0.75em; /* 12px/16=0.75em*/
}

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>
<p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p>
</body>

5.用百分比和em设置字体的大小

body {
    font-size: 100%
}
h1 {
    font-size: 3.125em; /* 50px/16=3.125em*/
}
h2 {
    font-size: 2.5em; /* 40px/16=2.5em*/
}
p {
    font-size: 0.75em; /* 12px/16=0.75em*/
}

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>
<p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p>
</body>

6.设置字体样式

p.normal {
    font-style: normal;
}
p.italic {
    font-style: italic; /* 浏览器会显示一个斜体的字体样式*/
}
p.oblique {
    font-style: oblique; /* 浏览器会显示一个倾斜的字体样式*/
}

<body>
<p class="normal">这是一个段落，正常。</p>
<P class="italic">这是一个段落，斜体。</P>
<P class="oblique">这是一个段落，斜体。</P>
</body>

7.设置字体的异体

p.capitalize {
    font-variant: normal;
}
p.smallcaps {
     font-variant: small-caps;
}

<body>
<P class="capitalize">my name is hege refsnes.</P>
<p class="smallcaps">my name is hege refsnes.</p>
</body>

8.设置字体的粗细

p.normal {
    font-weight: normal;
}
p.lighter {
    font-weight: normal;
}
p.thick {
    font-weight: bold;
}
p.thicker {
    font-weight: 900;
}

<body>
<P class="normal">This is a paragraph.</P>
<p class="lighter">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>

9.在一个声明的所有字体属性

p.space {
    font: 15px arial,sans-serif;
}
p.oblique{
    font: oblique bold 15px Georgia,serif;
}

<body>
<p class="space">This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>
<P class="oblique">This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</P>
</body>

1.设置文本的字体

2.设置字体大小

3.用px设置的字体的大小

4.用em设置的字体的大小

5.用百分比和em设置字体的大小

6.设置字体样式

7.设置字体的异体

8.设置字体的粗细

9.在一个声明的所有字体属性

猜你喜欢