训练营 坚持完成打卡任务 报名费全额返 更多>>
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
搜索
历史记录 清除记录
- 你还没搜索过喔。
点击刷新
设置文本的字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">这一段的字体是 Times New Roman 。</p>
<p class="sansserif">这一段的字体是 Arial 。</p>
</body>
</html>
设置字体大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落。</p>
</body>
</html>
用px设置的字体的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>这是段落</p>
<p>在px中指定字体大小允许internetexplorer9、Firefox、Chrome、Opera和Safari调整文本大小。</p>
<p><b>提示:</b> 这个例子在IE的早期版本9中不起作用。</p>
</body>
</html>
用em设置的字体的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
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 */
</style>
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>这是一个段落。</p>
<p>在em中指定字体大小允许所有主要浏览器调整文本大小。
不幸的是，旧版本的IE仍然存在问题。当调整文本大小时，它会变得比应该的大/小。
</p>
</body>
</html>
用百分比和em设置字体的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>这是一个段落。</p>
<p>以百分比和em指定字体大小将显示相同的大小
主要浏览器，并允许所有浏览器调整文本大小！</p>
</body>
</html>
设置字体样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">这是一个段落, normal.</p>
<p class="italic">这是一个段落, italic.</p>
<p class="oblique">这是一个段落, oblique.</p>
</body>
</html>
设置字体的异体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>
<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>
</html>
设置字体的粗细
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
在一个声明的所有字体属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.ex1
{
font:15px arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/30px Georgia,serif;
}
</style>
</head>
<body>
<p class="ex1">This is a paragraph. This is a paragraph. 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>
<p class="ex2">This is a paragraph. This is a paragraph. 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>
</html>
© 著作权归作者所有
举报
综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论
发表评价或提出疑问（可获得2-8个猿宝）
文章评分：
请选择内容评分
难易程度：
太简单
简单
适中
有点难
太难了
请选择课程难易程度 (+2个猿宝)