整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
體圖標
字體圖標簡單地說，就是一種特殊的字體，通過這種字體，顯示給用戶的就像一個個圖片一樣字體圖標最大的好處，在于它不會變形和加載速度快。字體圖標可以像文字一樣，隨意通過 CSS 來控制它的大小和顏色，對于建網站來說，非常方便。
圖片失真
首先查看是否是素材的原因，如果是素材的原因可以找 UI 修改圖片。如果是前端代碼地問題需要通過容器尺寸去控制。
index.html中引入，效果如下
<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
lt;!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>vh / vw 與 字體圖標</title>
<!-- 字體圖標引用方法一 -->
<link rel="stylesheet" href="my_ico.css" />
<!-- 字體圖標引用方法二 -->
<link rel="stylesheet" href="font_ico/iconfont.css">
<style>
/* 視口：可視窗口，手機端為了顯示全PC頁面，默認為980px */
/* 布局視口，只頁面底層的設置，看不見 */
/* 視頻視口，只頁面上的設置，直觀可見 */
/* 完美視口，只頁面完美配置設備窗口大小1：1顯示 */
/* vh: 1vh=視口高度的 1 / 100 ，vh(view height) */
/* vh: 1vw=視口寬度的 1 / 100 ，vw(view width) */
.box {
background-color: seagreen;
width: 50vw;
height: 25vh;
margin: auto; /* 頁面盒子始終在頁面中間，高度無法實現居中 */
}
.iconfont2 {
color: seagreen;
font-size: 55px;
/* background-color: slateblue; */
}
.icon-auto{
color: rgb(255, 0, 212);
font-size: 55px;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- 字體圖標引用方法一 -->
<span class="iconfont2"></span>
<br><p></p>
<!-- 字體圖標引用方法二 -->
<span class="iconfont icon-auto"></span>
</body>
</html>
vh / vw 居中布局
字體圖標使用方法
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
