【慢慢】V6.03.1 读书笔记 css字体

最新推荐文章于 2021-04-15 15:52:53 发布

浮生故城

最新推荐文章于 2021-04-15 15:52:53 发布

阅读量163

点赞数

分类专栏： css读书笔记文章标签： css字体

本文链接：https://blog.csdn.net/a1328636397/article/details/90747579

版权

css读书笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css字体

font-family 属性用于设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"，多个字体系列是用一个逗号分隔指明。

normal：正常显示文体
italic：斜体显示文字
oblique：文字也是向一边倾斜（这个字体好像更小一点）

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div{
            width: 80px;
            height: 100px;
            opacity: 0.5;
        } */
        h1{
            font-style: normal;
        }
        h2{
            font-style: italic;
        }
        h3{
            font-style: oblique
        }
    </style>
</head>
<body>
    <!-- <div style="background: brown">
        测试
    </div> -->
    <h1>This is zhengxuzhi</h1>
    <h2>This is zhengxuzhi</h2>
    <h3>This is zhengxuzhi</h3>
</body>
</html>

设置字体大小

font-size可以设置字体的大小，在style可以定义的格式为：

<style>
    .p1{
        font-style:1em;
    }
    
    .p2{
        font-size:50px;
    }
</style>

可以直接设置font-style或者font-size来设置字体的大小。

设置字体加粗

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

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

总体简述为：

100：最细
900：最粗
400：正常大小
700 ：加粗大小

使用方法简述为：

font-weight + （0~900）或者 bold 等

设置小型大写字母文本

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

简单的来说：

格式上：小写字母变大写

大小上：比大写字母小

small-caps：小型大写字母

unset：比实际字体小一点

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div{
            width: 80px;
            height: 100px;
            opacity: 0.5;
        } */
        h1{
            font-variant: small-caps;
        }
        h2{
            font-variant: normal;
        }
        h3{
            font-variant: unset;
        }
    </style>
</head>
<body>
    <!-- <div style="background: brown">
        测试
    </div> -->
    <h1>This is zhengxuzhi</h1>
    <h2>This is zhengxuzhi</h2>
    <h3>This is zhengxuzhi</h3>
</body>
</html>

设置文字宽窄

font-Stretch属性允许设置文字的宽窄，可以让文字变宽或变窄。

目前没有主流浏览器支持这个属性，有点遗憾。

更好的控制字体大小

font-size-adjust属性，让您更好的控制字体大小，当第一个选择的字体不可用时。

当一个字体不可用，浏览器使用第二个指定的字体。这可能会导致改变字体大小。为了防止这种情况，使用的font-size-adjust属性。

所有字体都能有"aspect值"，这是小写字母"X"和大写字母"X"的大小差异。

当浏览器知道"aspect值"为第一选择的字体时，浏览器可以找出什么样的font-size使用第二选择字体显示文字。

目前只有Firefox支持 font-size-adjust 属性.

好像后面跟数字，0.58是宋体。

浮生故城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【慢慢】V6.03.1 读书笔记 css字体

css字体font-family 属性用于设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"，多个字体系列是用一个逗号分隔指明。normal：正常显示文体 italic：斜体显示文字 oblique：文字也...
复制链接

扫一扫

专栏目录