HTML 学习记录（十）

xiao_wang98

已于 2022-05-17 13:18:30 修改

阅读量217

点赞数

分类专栏：笔记文章标签：学习 html css

于 2022-05-17 11:27:54 首次发布

本文链接：https://blog.csdn.net/little_w98biubiu/article/details/124800352

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

字体相关的样式：

color 字体颜色

font-size 字体大小单位：em rem

font-family 字体族(字体的格式) 可以同时指定多个，优先使用第一个

serif 衬线字体

sans-serif 非衬线字体

monospace 等宽字体

font-weight 字重，字体加粗

normal 默认值，正常

bold 加粗

100-900 九个级别(没什么用)

font-style 字体风格

normal 默认值，正常

italic 斜体

font-face：允许用户可以直接使用服务器中的字体

font-family：指定字体的名字(是自己起名，后面的样式里就使用这个名字作为字体的格式)

src：服务器中字体的路径

！！但是存在着加载速度慢以及可能产生版权纠纷的问题！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'myfont';
            src: url();
        }
        p{
            color: blue;
            font-size: 40px;
            font-family:'Times New Roman', Times, serif;
        }
    </style>
</head>
<body>
    <p>today is a good day</p>
</body>
</html>

图标字体：

字体相对于图片的优点：放大的时候字体不会失真(字体是个矢量图)，图片大小本身比较大，修改起来不灵活。有些时候网页里有一些小的图片，比如说一些小的单色图标之类的，用文字比用图片更加合适。

在使用图标的时候，可以将图标设置为字体，然后通过face-font的形式对字体进行引入。(复杂)

①fontAwesome 图标字体库
Font Awesomehttps://fontawesome.com/

下载完成后解压，主要使用到图中的两部分内容，将两个文件复制到项目中。

将all.css通过link引入到网页中，使用图标库，可以自由的设置大小和颜色。

使用方法一：类名使用fas或者fab

          class="fas 图标类名(查文档)"

          class="fab 图标类名(查文档)"

·· 弊端：比较麻烦，重复情况下需要多次复制每个都设置

使用方法二：使用伪类+font-family设置字体格式

从文档中获取到对应图标的编码赋值给content

           找到all.css里对应的font-family以及font-weight复制过来

使用方法三：通过实体使用 &#x图标编码；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./fontAwesome/css/all.css">
    <style>
        li{
            list-style: none;
        }
        li::before{
            content: '\f1b0';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
        }
    </style>
</head>
<body>
    <!-- 
        图标字体iconfont
    -->
    <!-- 方法一 -->
    <i class="fas fa-bell"></i>
    <!-- 方法二 -->
    <ul>
        <li>yi yiyi</li>
        <li>er erer</li>
        <li>san sansan</li>
        <li>si sisi</li>
    </ul>
    <!-- 方法三 -->
    <span class="fas">&#xf0f3;</span>
</body>
</html>

②iconfont 图标字体库

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/相比于font Awesome 会更加的美观、种类更多，但是下载使用稍微麻烦一些

！！版权问题不够清晰，使用的时候需要确认！！需登录！！彩色图标需变成图片使用！！

登录->选择图标->加入购物车->添加至项目->下载至本地->解压并复制到项目中->引入iconfont.css到项目中->使用图标

(可以通过demo_index.html查看使用案例，但不需要复制到项目中)

使用方法一:设置iconfont类并通过实体使用

使用方法二：通过图标的类使用

使用方法三：通过伪类使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* 由于设置了iconfont类，只对i元素选择无法覆盖iconfont的样式 */
        i.iconfont{
            font-size: 50px ;
        }
        p::before{
            content: '\e6f0';
            font-family: iconfont;
        }
    </style>
</head>
<body>
    <!-- 使用方法一:设置iconfont类并通过实体使用 -->
    <i class="iconfont">&#xe6f0;</i>
    <!-- 使用方法二：通过图标的类使用 -->
    <i class="iconfont icon-auto"></i>
    <!-- 使用方法三：通过伪类使用 -->
    <p>good</p>
</body>
</html>

字体的简写属性font：

font: 大小字体族

font: 大小/行高字体族

font: 其他样式大小(大小/行高) 字体族

！！font简写中有些样式不写时会使用默认值，且会覆盖掉上方对应样式的设置！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border: 1px red solid;
            /* line-height: 2; */
             font: 50px/2 'Times New Roman', Times, serif; 
            font-size: 20px;
            font-weight: bold;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div>天气不错</div>
</body>
</html>

xiao_wang98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 学习记录（十）

字体相关的样式：color 字体颜色font-size 字体大小单位：em remfont-family 字体族(字体的格式) 可以同时指定多个，优先使用第一个 serif 衬线字体 sans-serif 非衬线字体 monospa...
复制链接

扫一扫