css进阶-5.2web字体和图标

最新推荐文章于 2024-08-12 22:06:26 发布

夏赞恩

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量137

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_44714543/article/details/123361244

版权

web字体 @font-face 图标库用户体验矢量图标

关键词由CSDN通过智能技术生成

前端学习专栏收录该内容

49 篇文章 1 订阅

订阅专栏

文章目录

web字体和图标
- web字体
- 字体图标

web字体和图标

web字体

问题：用户电脑上没有安装相应字体，强制让用户下载该字体，会导致网页显示过慢，用户体验感不好。
解决方法：使用@font-face指令制作一个新字体

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	 <style>
	        /* 制作一个新的字体，名称叫做good night */
	        @font-face {
	            font-family: "good night";
	            src: url("./font/晚安体.ttf");
	        }
	        p {
	            font-family: "good night";
	        }
	</style>
</head>
<body>
    <p>
        在心里种花，人生才不会荒芜。
    </p>
</body>

字体图标

可以在阿里巴巴矢量图标库里面下载自己想要的图标：https://www.iconfont.cn/
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 这里链接iconfont.cn里给出的代码 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3187911_xijeakztf6.css">
</head>
<body>
    <p>
    	<!-- iconfont后面需要指明你所导入图标的代码 -->
        <i class="iconfont icon-ditu"></i>
        <i class="iconfont icon-jinrujiantouxiao"></i>
        <span>
            一个人与孤独相处的能力，往往决定了其选择不孤独的自由度。
        </span>
    </p>
</body>
</html>

夏赞恩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css进阶-5.2web字体和图标

文章目录web字体和图标web字体字体图标web字体和图标web字体问题：用户电脑上没有安装相应字体，强制让用户下载该字体，会导致网页显示过慢，用户体验感不好。解决方法：使用@font-face指令制作一个新字体<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
复制链接

扫一扫

专栏目录