CSS字体引用、字体图标以及overflow知识点延伸（设置导航条）

最新推荐文章于 2023-09-13 08:53:29 发布

yoghurt&girl

最新推荐文章于 2023-09-13 08:53:29 发布

阅读量483

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/ywforever/article/details/125422673

版权

一、字体引用【@font-face】

首先需要我们把我们所需要的字体下载到本地，然后在进行引用，这样就可以不用考虑用户电脑里有没有这个字体，我们只需要把这个字体包含在项目中，用户在浏览的时候都会自动下载到我们的字体，然后就会以我们需要的字体展示在网页中。

语法：

@font-face{

font-family:'myfont' //字体名字

src:url（字体路径）

二、字体图标

字体图标本质上来说不是一个图标而是一个字体，是一种特殊的字体。

语法：

<link rel="stylesheet" src="字体图标的样式文件.css">

也可以采用伪元素的方式进行引用

常用的字体图标下载网址：https://icomoon.io

<!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="font/style.css">
    <style>
        @font-face {
            font-family: 'test';
            src: url(font/站酷酷黑.TTF);
        }
        
        h5 {
            font-family: 'test';
        }
        
        h3 {
            font-family: 'icomoon';
            color: pink;
        }
        
        h4::before {
            font-family: 'icomoon';
            content: '\e911';
        }
    </style>
</head>

<body>
    <p>这是用于测试文字字体的，注意区分效果哟!</p>
    <h5>这是用于测试文字字体的，注意区分效果哟!</h5>
    <!-- 图标引用 -->
    <p>接下来是图标的引用哟！</p>
    <h3>接下来是图标的引用哟！</h3>
    <!-- 伪元素使用方式 -->
    <h4>伪元素使用方式的演示</h4>
</body>

</html>

效果图展示：

yoghurt&girl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS字体引用、字体图标以及overflow知识点延伸（设置导航条）

首先需要我们把我们所需要的字体下载到本地，然后在进行引用，这样就可以不用考虑用户电脑里有没有这个字体，我们只需要把这个字体包含在项目中，用户在浏览的时候都会自动下载到我们的字体，然后就会以我们需要的字体展示在网页中。字体图标本质上来说不是一个图标而是一个字体，是一种特殊的字体。font-family:'myfont' //字体名字。一、字体引用【@font-face】src:url（字体路径）...
复制链接

扫一扫