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

yoghurt&girl 2022-08-06 08:25:05 阅读数:11

css引用字体图标

一、字体引用【@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]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/ywforever/article/details/125422673