字体——CSS

_洋

已于 2022-04-12 19:29:56 修改

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： css3

于 2022-04-12 16:07:14 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/124124561

版权

JavaScript 专栏收录该内容

52 篇文章 7 订阅

订阅专栏

字体相关的样式

color用来设置字体颜色
font-size设置字体的大小
font-family字体族(字体的格式)
font-face
字体和图片相比的优点
加粗
字体的风格——斜体
字体属性的简写

color用来设置字体颜色

color实际上指的是前景色，如果border不指定颜色，那么它的颜色也是color所指定的颜色。

font-size设置字体的大小

和 font-size 相关的单位 :
em相当于当前元素的一个font-size
rem相对于根元素的一个font-size
默认情况下：1em = 16px;1rem = 16px,因为字体的大小默认是16px。

font-family字体族(字体的格式)

eg:

      font-family: "华文彩云";

输出：
在这里插入图片描述
字体族的分类：
serif衬线字体
sans-serif 非衬线字体
monospace等宽字体
指定字体的类别，浏览器会自动使用该类别下的字体

font-family可以同时指定多个字体，多个字体间使用,隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个以此类推
eg：

font-family:Arial, Helvetica, sans-serif;

font-family只是推荐你使用的字体，如果你电脑中有该字体，就会使用该字体，如果没有就不使用。
电脑中字体所在位置：C:\Windows\Fonts

也就是说，如果用户的电脑中没有你设置的字体样式，就不会使用该字体样式显示。

font-face

font-face 可以将服务器中的字体直接提供给用户去使用，就是说若用户电脑中没有改字体，就会下载到用户电脑上供用户使用。
使用方法：在你的项目上新建一个font文件夹，将你使用到的字体放到该文件夹上，
在使用该字体的网页的style标签中中添加如下语句：

@font-face{
            /* 指定字体名称：自己定义 */
            font-family:'myfont';
            /* 服务器中字体的路径 */
            src:url('./font/Before\ The\ Rain.TTF')
        }

之后就可以使用该字体了。
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        @font-face{
            /* 指定字体名称：自己定义 */
            font-family:'myfont';
            /* 服务器中字体的路径 */
            src:url('./font/Before\ The\ Rain.TTF')
        }
        p{
            color: brown;
            font-size: 30px;
            font-family:myfont;
        }
    </style>
</head>
<body>
    <p>今天天气真不错！ hello，hello，how are you</p>
</body>
</html>

在这里插入图片描述

问题：
1.加载速度会变慢，因为第一次访问需要下载字体。
2.版权问题。

字体和图片相比的优点

字体是矢量的，不会失真，即字体再大也是清晰的。
可以调整颜色和大小。

加粗

font-weight：代表字重，字体的加粗

可选值:

normal 默认值不加粗
bold 加粗：100-900九个级别(但是没什么用，因为如果你的电脑中有该字体的1-9个不同粗读的字体才会正常显示，否则无法显示)

字体的风格——斜体

font-style字体的风格：

normal正常的
italic 斜体

字体属性的简写

font可以设置字体相关的所有属性
语法:
font: 加粗斜体字体大小/加粗斜体字体族

字体大小和字体族不可以省略。
其他属性可以省略，省略就代表使用默认值，即使上面设置了加粗、斜体和行高也会被覆盖掉。
eg：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
    div{
        border: 1px brown solid;
        line-height: 2px;
        font: 50px  Arial, Helvetica, sans-serif;
    }

    </style>
</head>
<body>
    <div>哈哈哈，吃了吗？</div>
</body>
</html>

在这里插入图片描述
行高为2就没有作用，因为下面的font，使行高使用默认值。

eg：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
    div{
        border: 1px brown solid;
        line-height: 2px;
        font:bold italic 50px/2  Arial, Helvetica, sans-serif;
    }

    </style>
</head>
<body>
    <div>哈哈哈，吃了吗？</div>
</body>
</html>

在这里插入图片描述

_洋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
字体——CSS

字体相关的样式color用来设置字体颜色font-size设置字体的大小font-family字体族(字体的格式)font-face字体和图片相比的优点color用来设置字体颜色color实际上指的是前景色，如果border不指定颜色，那么它的颜色也是color所指定的颜色。font-size设置字体的大小和 font-size 相关的单位 :em相当于当前元素的一个font-sizerem相对于根元素的一个font-size默认情况下：1em = 16px;1rem = 16px,因为字体的
复制链接

扫一扫