CSS常用的外部字体及icomoon图标的使用方法

目录：html5+css3网页设计与制作目录

1.常用的CSS外部字体,开源免费

(1)font-awesome

https://www.bootcss.com/p/font-awesome/

(2)阿里巴巴矢量图标库

https://www.iconfont.cn/

(3)矢量图标素材分享网

https://icomoon.io/

 

2.icomoon图标的使用方法

 (1)下载后放到网站目录fonts文件夹下

 

(2)字体文件后缀

• .TTF或.OTF，适用于Firefox 、Safari、Opera
• .EOT，适用于Internet Explorer 4.0+
• .SVG，适用于Chrome、IPhone
• .WOFF，大多数浏览器都支持，最为推荐
• 这些字体的格式在代码中应按照下面的顺序显示：
• .eot .woff .ttf/.otf .svg

 

 (3)字体文件的引用

(转自:https://www.runoob.com/cssref/css3-pr-font-face-rule.html)

CSS3 @font-face 规则:指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL：

@font-face

{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
 url('Sansation_Light.eot'); /* IE9 */
}

属性定义及使用说明

@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。

字体的名称，font - face规则：

• font-family: myFirstFont;

字体文件包含在您的服务器上的某个地方，参考CSS：

• src: url('Sansation_Light.ttf')

如果字体文件是在不同的位置，请使用完整的URL：

• src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')

/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?tomleg');
    src:  url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?tomleg') format('truetype'),
      url('../fonts/icomoon.woff?tomleg') format('woff'),
      url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

目录位置如下:

 (4)图标的使用

使用CSS中的before或者after设置图标

HTML5代码:

<div class="shopcar">
            我的购物车
            <i class="count">8</i>
        </div>

CSS代码如下:

.shopcar::before {
    content: '\e93a';
    font-family: 'icomoon';
    margin-right: 5px;
    color: #b1191a;
}

.shopcar::after {
    content: '\e920';
    font-family: 'icomoon';
    margin-left: 10px;
}

效果如下:

 

 

参考文章:

https://www.cnblogs.com/wax-o/p/12055435.html

 https://blog.csdn.net/goodgirl1991/article/details/50416974