CSS基础笔记——字体样式

最新推荐文章于 2022-08-03 17:55:07 发布

Kll .

最新推荐文章于 2022-08-03 17:55:07 发布

阅读量162

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/qq_48894948/article/details/118898055

版权

前端学习笔记专栏收录该内容

18 篇文章 1 订阅

订阅专栏

字体类型：font-family

在CSS中，我们可以使用font-family属性来定义字体类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体样式</title>
        <style type="text/css">
            #div1{font-family: Arial;}
            #div2{font-family: 'Times New Roman';}
            #div3{font-family: "微软雅黑";}
        </style>
    </head>
    <body>
        <div id="div1">Arial</div>
        <div id="div2">Times New Roman</div>
        <div id="div3">微软雅黑</div>
    </body>
</html>

对于font-family属性，如果字体类型只有一个英文单词，则不需要加上单引号或双引号，如果字体类型是多个英文单词或是中文，则需要加上双引号或者单引号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体样式</title>
        <style type="text/css">
            p{font-family: Arial, Helvetica, sans-serif;}
        </style>
    </head>
    <body>
        <p>Rome was not built in a day.</p>
    </body>
</html>

对于p{font-family: Arial, Helvetica, sans-serif;}这句代码，每个人的电脑装的字体都不一样，有些字体有安装，有些字体没有安装，所以这一句的意思是p元素优先使用Arial字体，如果没有安装，就考虑Helvetica字体，以此类推，如果都没有安装，就会默认字体宋体来显示

字体大小：font-size

font-size属性取值有两种：一种是关键字，如samll、medium、large等，不过在实际开发中，关键字这种方式基本不会用；另一种是像素值，如10px、16px、21px等，px全称pixel（像素）

font-size的取值单位不仅仅是px，还有em、百分比等等。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体样式</title>
        <style type="text/css">
            #p1{font-size: 10px;}
            #p2{font-size: 15px;}
            #p3{font-size: 20px;}
        </style>
    </head>
    <body>
        <p id="p1">字体大小为10px</p>
        <p id="p2">字体大小为15px</p>
        <p id="p3">字体大小为20px</p>
    </body>
</html>

字体粗细：font-weight

font-weight属性取值有两种：一种是100~900的数值，另一种是关键字

#p{font-weight: bold;}

不过在实际开发中，不建议使用数值作为font-weight的属性取值

字体风格：font-style

在CSS中，我们可以使用font-style属性来定义斜体效果

有些字体有些斜体italic属性，但有些字体却没有italic属性，oblique是让没有italic属性的字体也能够有斜体效果

字体颜色：color

color属性取值有两种，一种是关键字，另一种是十六进制RGB值，除了这两种，其实还有RGBA、HSL等等，这是属于CSS3的内容

CSS注释

/*注释的内容*/

CSS注释与HTML注释的语法是不一样的

Kll .

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础笔记——字体样式

字体类型：font-family在CSS中，我们可以使用font-family属性来定义字体类型<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>字体样式</title> <style type="text/css"> #div1{font-family...
复制链接

扫一扫