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