CSS学习总结基础篇设计字体属性

最新推荐文章于 2024-04-22 13:50:02 发布

Ace_bb

最新推荐文章于 2024-04-22 13:50:02 发布

阅读量214

点赞数

分类专栏： HTML、CSS、JS 文章标签： css html javascript

本文链接：https://blog.csdn.net/Ace_bb/article/details/104271199

版权

HTML、CSS、JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

字体属性

CSS Fonts属性可以用于定义字体系列，大小，粗细，和文字样式（斜体，加粗，下划线等）

字体系列

CSS使用font_family属性定义文本的字体系列
语法格式：
p {
font-family: “微软雅黑”;
}
div {
font- family: Arial, “Microsoft Yahei”, “微软雅黑”;
}
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        h2{
            font-family: "Microsoft YaHei UI";
            color: red;
        }
        p{
            font-family: "Times New Roman",Tahoma,Serif;
            font-size: 22px;
            color: green;
        }
    </style>
</head>
<body>
    <h2>标题字体设置为微软雅黑</h2>
    <p>这是文本主题内容的字体，同样也为微软雅黑</p>
    <p>这是文本主题内容的字体，同样也为微软雅黑</p>
    <p>这是文本主题内容的字体，同样也为微软雅黑</p>
    <p>这是文本主题内容的字体，同样也为微软雅黑</p>
</body>
</html>

效果：
效果图
●各种字体之间必须使用英文逗号隔开
●一般情况下，如果有空格隔开的多个单词组成的字体加引号，例如"Microsoft YaHei UI".
●尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示，自己添加的字体在其他用户电脑上不一定有这样的字体。
●最常见的几个字体:
body {font-family: 'Microsoft YaHei" ,tahoma,arial, “Hiragino Sans GB”; }

可以对body标签内的所有内容设计同样的字体。

可以用font-size:20px 设定字体大小
p{
font-size:20px;
}
px( 像素)大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器默认显示的字号大小可能不一致,我们尽量给一个明确值大小，最好不要使用默认大小字体。
可以给body指定整个页面文字的大小.

字体粗细

CSS使用font-weight属性来定义字体的粗细。定义字体粗细通常用于强调某几个字。所以最好使用**.类名的方式定义
font-weight 有normal bold bolder lighter 四种默认属性，还可以通过直接指定数字大小来定义字体粗细。推荐直接用数字指定。
normal :正常的字体。相当于number为400**.声明此值将取消之前任何设置
bold :粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+特粗体
lighter: IE5+细体
number:IE5+100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        h2{
        	font-family: "Microsoft YaHei UI";
            font-weight: 700;
        }
        .bold{
            font-weight: bold;
        }
        .bolder{
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <h2>标题字体设置为微软雅黑</h2>
    <p class="bold">这是文本主题内容的字体，同样也为微软雅黑</p>
    <p>这是文本主题内容的字体，同样也为微软雅黑</p>
    <p class="bolder">这是文本主题内容的字体，同样也为微软雅黑</p>
    <p>这是文本主题内容的字体，同样也为微软雅黑</p>
</body>
</html>

效果：

文字样式

CSS使用font-style定义文本的风格
语法格式：
p{
font-style:normal;
}
normal 默认值，浏览器会显示标准的字体样式font-style: normal;
italic 浏览器会显示斜体的字体样式。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        p{
            font-style: italic;
        }
        .notitalic{
            font-style:normal;
        }
    </style>
</head>
<body>
<h2>标题字体设置为微软雅黑</h2>
<p class="notitalic">这是文本主题内容的字体</p>
<p>这是文本主题内容的字体</p>
<p class="notitalic">这是文本主题内容的字体</p>
<p>这是文本主题内容的字体</p>
</body>
</html>

效果：
效果图

字体复合属性

字体属性可以把上述所有属性复合到一句话中写完
body {
font: font-style font -weight font- size/line-height font-family;
}
必须严格按照格式来定义。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        h2{
            /*font: font-style font -weight font- size/line-height font-family;*/
            font: italic 700 16px 'Microsoft YaHei UI';
        }
    </style>
</head>
<body>
<h2>标题字体设置为微软雅黑</h2>
<p class="notitalic">这是文本主题内容的字体</p>
<p>这是文本主题内容的字体</p>
<p class="notitalic">这是文本主题内容的字体</p>
<p>这是文本主题内容的字体</p>
</body>
</html>

效果图
●使用font属性时,必须严格按语法格式中的顺序书写，不能更换顺序，井且各个属性间以空格隔开
●不需要设置的属性可以省略(取默认值) ,但必须保留font- size和font family属性,否则font属性将不起作用

Ace_bb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习总结基础篇设计字体属性

字体属性CSS Fonts属性可以用于定义字体系列，大小，粗细，和文字样式（斜体，加粗，下划线等）字体系列CSS使用font_family属性定义文本的字体系列语法格式：p {font-family: “微软雅黑”;}div {font- family: Arial, “Microsoft Yahei”, “微软雅黑”;}示例代码：<!DOCTYPE html>...
复制链接

扫一扫