当前位置：首页 > news >正文

HTML5:七天学会基础动画网页6

news 2025/8/21 11:01:07

CSS3自定义字体

①：首先需要下载所需字体

②：把下载字体文件放入 font文件夹里，建议font文件夹与 css 和 image文件夹平级

③：引入字体，可直接在html文件里用@font-face引入字体，分别是字体名字和路径

例:

<style>

width: 200px;

height: 100px;

margin: 40px auto;

border: 1px solid black;

text-align: center;

font-family:'name' ;

(此处给引入字体起名)

}

@font-face(此处用于引用字体){

font-family:'name';(注意名字相同)

src: url(./);

...............

}

</style>

</head>

<body>

<p>hello world</p >

</body>

当我们引用很多字体时，可能不知道哪个具体生效，加载速度慢，第一时间加载不出来，最好做成图片，速度快。

字体图标

关于我们日常设计时需要一些图标，苦无没有素材，我们这里以阿里图标库为例。

首先引入下载好的字体图标的css文件

我们重命名iconfont

<head>

<link rel="stylesheet" href="./......">

</head>

<body>

</body>

如果我们想保留彩色的图标:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jingdong边侧栏练习</title>
    
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <script src="./ionFont/ionFont.js"></script>
    <style>
        /* 设置样式 */
        .icon{
            width: ;
            height: ;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>
    
   <svg class="icon" aria-hidden="true">
    <use xlink:href="#(阿里图标库中fontclass复制的代码，注意要先下载到本地)"></use>
   </svg>
   </body>