CSS字体属性

最新推荐文章于 2024-07-20 18:05:02 发布

AkbarSmile

最新推荐文章于 2024-07-20 18:05:02 发布

阅读量353

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/2201_76067045/article/details/138259113

版权

本文详细介绍了CSSFonts属性，包括如何设置字体系列（使用英文名和系统默认），字体大小的设定，字体粗细的控制（包括bold、bolder、lighter和数值表示），以及文字样式的调整（斜体）。还讨论了复合属性的使用方法。

摘要由CSDN通过智能技术生成

CSS Fonts属性用于定义字体系列，大小，粗细，文字样式（如斜体。）

1.字体系列

用 font-family 属性定义文本的字体系列。

<style>
    p {
        font-family :'Microsoft YaHei';
    }
</style>

注意：

字体的名字尽量使用英文。
如果字体是两个字，中间有空格，用引号（单双都可以）引起来。
如果有有很多字体，用逗号分隔开。
尽量使用系统默认的字体：（Google 浏览器默认的字体是：Microsoft YaHei）

2.字体大小

<style>
    p {
        font-size: 20px;
    }
</style>

Google 浏览器默认的文字大小是 16px。

不同的浏览器文字大小是不一样的，我们尽量给一个明确的值，不要默认。

可以给整个 body 指定整个页面的文字大小。

注意，标题比较特殊，有时候需要单独设置字体大小。

3.字体粗细

用 font-weight 设置属性文本字体的粗细。

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
用数字：	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体练习</title>

    <style>
        .bold {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>nice to meet you</h1>
    <p class="bold">优雅，淡然，有那么心中清澈。</p>
    <p>这是粗的字体。</p>
</body>
</html>

一般用 HTML 中的strong。

最好用数字来指定粗细。

4.文字样式

用 font-style 属性设置文本的风格。

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。

<style>
    p {
        font-style: italic;
    }
</style>

5.字体复合属性

使用场景：

<style>
    /*想要bold 文字变倾斜，加粗，字号设置为16像素并且微软雅黑。*/
 	.bold {
        font-style: italic;
        font-weight: 700;
        font-family: 'Microsoft YaHei';
        font-size: 16px;
    }
    
    /*复合写法*/
    
    .bold {
        /*font: font-style font-weight font-size/line-height font-family;*/
        font: italic 700 16px/20px 'Microsoft YaHei';
    }    
</style>