CSS——Fonts(字体)

最新推荐文章于 2024-01-27 14:42:19 发布

konsy_dong

最新推荐文章于 2024-01-27 14:42:19 发布

阅读量549

点赞数

分类专栏： CSS HTML 文章标签： css Fonts-字体

本文链接：https://blog.csdn.net/sinat_36053757/article/details/63686024

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

所有CSS字体属性

font            在一个声明中设置所有的字体属性
font-family     指定文本的字体系列
font-size       指定文本的字体大小
font-style      指定文本的字体样式
font-variant    以小型大写字体或者正常字体显示文本。
font-weight     指定字体的粗细。

字体系列

Serif          Times New Roman Georgia    Serif字体中字符在行的末端拥有额外的装饰
Sans-serif     ArialVerdana               "Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace      Courier NewLucida Console  所有的等宽字符具有相同的宽度

字体样式

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
2. 相对大小：1em和当前字体大小相等。在浏览器中默认的文字大小是16px
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>再见二逼K</title>
<style>

p.serif{font-family:"Times New Roman",Times,serif;} <!--字体系列-->
p.sansserif{font-family:Arial,Helvetica,sans-serif;}

p.normal {font-style:normal;}<!--字体样式-->
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

h1 {font-size:40px;} 
p {font-size:14px;} 

h2 {font-size:2.5em;} <!--40px/16=2.5em-->
h3 {font-size:1.875em;} <!--30px/16=1.875em-->
p1 {font-size:0.875em;} <!--14px/16=0.875em-->

</style>
</head>

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

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

<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
<p1>This is a paragraph.</p1>

</body>
</html>