载入外部样式的方法（外部字体与外部字体图标）

1.外部字体
使用@font-face引入字体文件
<!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>
    <style>
        div{
            font-family: 'myfont';
            font-size: 50px;
            color: red;
        }
        @font-face {
            font-family: 'myfont';
            src: url('./fonts/Lucky7.otf');
        }
    </style>
</head>
<body>
    <div >hello world</div>
</body>
</html>

 

 
2.外部字体图标（常用的两个网站 http://www.fontawesome.com.cn/和 https://www.iconfont.cn/）
1）font awesome
下载框架压缩包---->在html中引入外部css文件---->在行内元素上，设置class="fa fa-xxx  "(xxx代表的是图标名称网站上有直接复制即可)
还可以设置不同大小（fa-5x放大5倍），也可以单独设置style，但有时候可能不会生效，因为涉及优先级问题。
font-awesome.min.css引入这个带min的实际开发更好，因为它是压缩代码之后的文件，空间小
  
<!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>
</head>
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
<body>
    <div>
        <span class="fa fa-gift fa-5x"></span>
    </div>
    
</body>
</html>

 

 
2）icon font
下载框架压缩包---->在html中引入外部css文件---->在行内元素上，设置class="iconfont  xxx  "
这个比上面方法好的一点是它不用把整个压缩包都引入，只需把自己需要的引入即可
在网站中找到自己需要的图标，然后加入购物车，在购物车中找到在加入到项目中，然后下载到本地，复制图标代码到上述class="iconfont  xxx  "   将xxx替换即可
<!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>
</head>
<link rel="stylesheet" href="./font_2327431_8py4al0iqlw/iconfont.css">
<body>
    <div>
        <span class="iconfont icon-iPad"></span>
        <span class="iconfont icon-duoyun"></span>
        <span class="iconfont icon-shengdantubiao-02"></span>
        <span class="iconfont icon-shengdantubiao-03"></span>
    </div>
    
</body>
</html>

 

 
posted @ 2021-01-14 17:07  一只蒟蒻也有大佬梦  阅读(445)  评论(0)    收藏  举报