1.10Web前端基础笔记——练习

至暗

已于 2022-03-21 13:59:48 修改

阅读量219

点赞数

分类专栏： 1.web前端——html、css基础文章标签：前端 css html web

于 2022-03-18 20:39:10 首次发布

本文链接：https://blog.csdn.net/m0_64838786/article/details/123576305

版权

一、字体族

和font-size相关的

em 相当于当前元素的font-size
rem 相当于根元素的一个font-size

font-family——字体族（字体的形式）

可选值：
serif——衬线字体！
sans-serif——非衬线字体！
monospace——等宽字体！
cursive——草书字体
fantasy——虚幻字体
指定了字体的类别，浏览器会自动选择使用该类别下的字体

font-family: serif,monospace,'Courier New';

如果有第一个字体就用第一个，没有用第二个，第二个也没有就用第三个。

/* 问题:加载速度/版权等 */
        @font-face {
            /* 自己制定字体的名称 */
            font-family: 'myfont';
            /* 服务器中字体的路径 */
            src: url(./font/ZCOOLKuaile-Regular.ttf);
        }

二、图标字体(iconfont)

在网页中经常需要使用一些图标,可以通过图片来引用,但图片大小本身较大
所以在使用图标时,我们还可以将图标直接设置为字体,然后通过font-face的形式来对字体进行引入

fontawesome
将css和webfonts移动到项目中
将all.css引入到网页中
使用图标字体:class=“fas fa-bell”/class=“fab fa-accessible-icon”…(这两种免费)

通过伪元素来设置图标字体

找到要设置图标的元素，通过before和after选中
在content中设置字体的编码
设置字体的样式
fab ——
font-family: ‘Font Awesome 5 Brands’;
fas ——
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;

通过实体来使用图标字体：
&#x图标编码;

<!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>京东顶部导航条</title>
    <link rel="stylesheet" href="./fa/css/all.css">
    <style>
        li{
    
            list-style: none;
        }
        li::before{
    
            content: '\f1b0';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            锄禾日当午
        </li>
        <li>
            锄禾日当午
        </li>
        <li>
            锄禾日当午
        </li>
        <li>
            锄禾日当午
        </li>
    </ul>

</body>
</html>