Web字体和图标

Web字体

Web字体的出现是解决用户电脑上没有安装相应字体的问题

之前我们为了兼容性,会在font-family中写入很多备选字体,往往第一个字体是页面重构师希望在用户的电脑上出现的,因为能给用户最好的体验

font-family:"翩翩体-简","Arail","微软雅黑","sans-serif";

Web字体工作流程

用户电脑上没有安装相应字体,强制让用户下载该字体

自己制作一个新的字体

1.iconfont在线引用方式

<!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>Document</title>
    <style>
        @font-face{
            font-family: "good night";
            src:url("http://ys-c.ys168.com/616104758/216644006/l453842764KOJV45Wjhe2/%E3%80%90%E5%BC%80%E5%BC%80%E3%80%91%E6%99%9A%E5%AE%89%E4%BD%93.ttf")
        }
        p{
            font-family: "good night";
        }
    </style>
</head>
<body>
    <p>
        对未来真正慷慨的,是把一切献给现在!
    </p>
</body>
</html>

Web图标

在线字体图标的引用

<!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>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2455193_8pyexrsegx.css">
    <style>
        .icon-denglu{
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-denglu"></i>
    <span>i元素是一个行盒</span>
</body>
</html>

离线字体图标的引用

离线字体图标和在线字体图标我都是采用font class的形式,我们在下载好的iconfont里面挑选6个文件并将他们复制到css文件夹中
6个文件

<!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>Document</title>
    <link rel="stylesheet" href="./css/iconfont.css">
    <style>
        .icon-denglu2{
            font-size: 100px;
            color: green;
        }
    </style>
</head>
<body>
       <i class="iconfont icon-denglu2"></i>
</body>
</html>

如果您认为css中不应该出现字体文件,只需要修改iconfont.css文件即可,并在项目中新建font文件夹
修改的iconfont.css文件如下

@font-face {font-family: "iconfont";
  src: url('../font/iconfont.eot?t=1617095410640'); /* IE9 */
  src: url('../font/iconfont.eot?t=1617095410640#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWIAAsAAAAAClwAAAU6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqIHIZUATYCJAMQCwoABCAFhG0HRBvCCMgeIXOS0tJSVSWfjIf+5z7vvEzgJAusQAGq3SLrqq4tolIIwlX4Cl1fzUb8odysCQmVpPUIeNrSrlMq6pCahtahKuytWsKasmaGvE7Uqw/wj3unv3WehfNZltNYg8aYtDDAaGwNaG+gtgVcwFLMPcAzXJjA4wR6y+aDLmTma4GLJAgDEx62tzYCF5dKxuBDJ21ClqYXtA4IdWW54BkAnuufj/8gNFyAoq6AcNLl2xktIPmX+DMtPPN/UFOZwDvlGXBbRYUdQBJ3Q03XwaZgRxf1YeGIQ4BONBTKasv9TPv//yanL6KO//IIlUI0QBCNEe6Ar+KXWKYR/MplhYm1qFIYk6M7TBJXAYivgFt8ZqNow80zINBHovIiESRepWh1s32qc3xebv+MsX7CaldY5x+2fexIO2FnGEsVf0l++Dy1yaYD+OIH7pZDVx0B5quSrftnO+yk5aPwQ9YFvL3cYSviNoGDUjGHc2aKs+lsWsZ0IshyDt9kDzryiN5diVqOkLyZ4A4T2Mp5Zg4/NMybjq4kdNwMrt204oiJKvdSHwtBpqOYd63HA7s/hIGP1wM9D96UCrfeCPLYf00E0NjnyPK8b/NDdlvrvVceFgs2H1J5WY5I4G1HGzfhAgGleHKmiiA4AgVDoFIJhIJ9S7gfE05S80h8Nv9kNCAMNW+jSDwYecPMgOAGYtN+Ncx8lAJYxPIpIYK3kPOo8hSuwGQ4h4KZlF1QlCMIgL03U5IeMvFkJqXBuoqEkKxAwZuNDFsx8M8E/WjlL2kVi63IW0QiRjS8RPL2W4klO63nlUJGJZt4OTnfaVd9maok7LjvOsQ4MSvF9Fge4J1BjmgDIyJ82RRpyb/C5OTL0aV9eycURT+5uRdjy3FvAjs+Sm0L2jznUVlhRWwWEamahjL3+yqigaVoRVWme55LfUClYLGAiix9svSLQZfvdx9tKLoNQylLoMiL6cDvB+SNZFyOqAJrtMvl/rItX351RHFEOcsWWZh06+kzSk9/TzC566Hs97OsyytwXZa2zI25ZbnFuH3vptMZPr5rYMo6y0x+get3rjwDqC/sxbfC8+Etmr2aLfyLtq75I1W5uWH3YDw7OyIrGoETfF/4Jj3hJVWS3rnL4pf5msLSNx9671DTX8OaiMjaCIP0WPqKzws+02T5JEQdZ8JSzdxVnh/e3LNvRcTnd59jZdi1fZ9lZOrO5psbDrco6cgX+FXJnfplu9QYFeoldBcISCcfTaN3WSEqlOav0i90LayNJqJV84h5SlKpJtQq1+650igirwkjGCJKBowARuBf4RkcHUmATQCQyqWzdZijz87b6z3jf3XBNlfJz+XYT6QZSc865dgf9rmZkckAkCfvXEGd+RaKlWQNUdI34IxjCno9zsggM94rQzKfOp7QmbehaC1BpbOCStwO1AYHoNE5Db1tWasHs/rAIl0BWxYDhCknoZjwHSpTnqMS9y7UFnwLjamAoXclfLccrEU7mtbHNg6wLXTTKN3ebOjRS9oB1EgsZVsHuxr7nFydyLB9/e0OOkSt8Qay2B62r4wZ/UOtoQMDelrfZ+imM+E0tqvLQBv7DB1s84C6bWDAGBscrA87k7rZ0A1Q5/VhNRrAakFrMorWrplBD71afADqe38pVqtBXRr1xeT90DNYffq1d04LoaZJgcoS9aTK25b0fkNahRogtx5Nf4s36EbLJAOrS/Qa0Izhgzqwmg1Qa8vhNooVTIX0aUXq+iXdS7gGesIRGQIIhhBICJqbbE9r16CzJgm5GkMBAAAA') format('woff2'),
  url('../font/iconfont.woff?t=1617095410640') format('woff'),
  url('../font/iconfont.ttf?t=1617095410640') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../font/iconfont.svg?t=1617095410640#iconfont') format('svg'); /* iOS 4.1- */
}

简而言之就是把所有url后添加../font/目录即可
项目开发的时候可以使用link元素引用阿里cdn下的css文件,项目要上线时下载到本地引用,如果购物车里重新添加了字体图标就需要更新link元素,也就意味着本地文件需要再一次下载

如果您发现文章中有不妥之处请与我联系,我将感激不尽
转载著明:sayc.cc 菠萝吹雪的博客

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×