CSS3自定义字体

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

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

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

例:

<style>

        p{

            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>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

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

</head>

<body>

   <span class="iconfont (后面这里是在阿里图标库font class中复制的代码)"></span>

   </body>

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

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

这里再提供几个别的图标网站

iconfont: https://www.iconfont.cn

68f889b044154c2bbaf9be0a6f402396.jpg

 iconstore:https://iconstore.co

b80024228aa94635b3f06a39b2a14063.jpg

 feathericons: https://feathericons.com

f349cad34c804eda96286eb4a89c2b2a.jpg

 Heroicons:https://heroicons.com

73c6c2c2ba8c4d6e92191193b9b29383.jpg

 Remix Icon: https://remixicon.com

756e8958cc5b45fe845d706e8befe3e0.jpg

 iconpark:https://iconpark.oceanengine.com

d8d721f649944198b7f7417231c75f23.jpg

 Flat Icon: https://www.flaticon.com

66bc7ac587aa4b57996a11e4e10f9cb5.jpg

 Css.gg: https://css.gg

0608962c66204b2a9ebdd09b5d0a47f6.jpg

 还有很多别的网站,对这个的建议是有开源的材料就用免费的,素材多的是。

 

更多推荐