整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS中字體圖標入門

          CSS中字體圖標入門

          .什么是字體圖標

          可以看作一種特殊字體,其展示的是圖標,而不再是文字,其擁有字體的特性,比如大小、顏色、透明效果、陰影等,字體圖標加載快、不變形。也可以看作是矢量格式的圖標。

          2.字體圖標常用免費資源

          (1)iconmoon字體圖標庫:https://icomoon.io/app

          (2)阿里iconfont字體圖標庫:https://www.iconfont.cn/

          (3)font-awesome字體圖標庫:

          3.字體圖標使用步驟

          以iconmoon為例

          (1)選擇需要的圖標并下載

          1)在fonts文件夾下有四種類型的字體文件,每種字體文件兼容瀏覽器的種類不同

          a).tff格式(TrueTypeFont),美國蘋果公司和微軟公司共同開發的,在Windows和Mac操作系統中為默認字體;IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。

          b).woff格式(Web Open Font Format-Web開放字體格式),是一種網頁所采用的字體格式標準,使用zlib壓縮,文件大小一般比TTF小40%;IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。

          c).eot格式(Embedded Open Type-嵌入式OpenType ),微軟設計用來在網頁使用的字體格式,是OpenType字體的壓縮格式,IE專用,IE4+支持該字體。

          d).svg格式(Scalable Vector Graphics-可縮放的矢量圖形),它是一種用XML定義的語言,用來描述二維矢量及矢量/柵格圖形;Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。

          其他字體

          e).otf格式(Open Type Font),Microsoft和Adobe公司開發的,.otf格式比.ttf更為強大,可以把PostScript字體嵌入到TrueType中。

          2)字體轉換

          https://www.fontke.com/tool/convfont/

          (2)字體圖標的引入

          1)把字體放到項目的相應位置

          將下載解壓后的fonts文件夾放到項目路徑下

          2)在html頁面中引入字體

          利用CSS的@font-face屬性,引入外部字體;

          在style.css文件中有如下代碼,為固定用法,注意url中字體路徑,其它可以不變。

          在html的style標簽中引入如下代碼:

          @font-face {
            font-family: 'icomoon';
            src:  url('fonts/icomoon.eot?8l3wc0');
            src:  url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
              url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
              url('fonts/icomoon.woff?8l3wc0') format('woff'),
              url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
          }

          3)為元素用該字體

          span {
                  font-family: "icomoon";
              }

          4)為元素添加內容

          復制demo.html中需要的圖標,如下,將其作為元素的內容。

          <span>?</span> 

          (3)新增字體圖標的引入

          當利用iconmoon選用字體圖標時,如果有新增的字體圖標需要加入,則需要用到.json文件,如下,在原先選擇的基礎上,再選擇新選擇的字體圖標,然后再下載使用。

          1)字體的屬性

          • font 屬性
          • font-family 屬性
          • font-size 屬性
          • font-weight 屬性
          • font-style 屬性

          字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示:

          屬 性

          可 取 值

          描 述

          font

          font-style、font-variant、font-weight、font-size(或 line-height)、font-family

          在一個聲明中設置所有的字體屬性

          font-family

          字體名稱、inherit

          設置字體類型

          font-size

          xx-small、x-small、small、medium(默認)、large、x-large、xx-large smaller、larger length、%、inherit

          設置字體大小

          font-weight

          normal(默認)、bold、bolder、lighter、inherit 100、200…900(400=normal,700=bold)

          設置字體粗細

          font-style

          normal、italic、oblique、inherit

          設置字體風格

          例子,

          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>Document</title>
              <style>
                h3 {
                  font-size: 20px;
                  font-family: 隸書;
                  line-height: 28px;
                }
                span {
                  font: italic 16px 華文彩云;
                }
              </style>
            </head>
            <body>
              <h3>Web 前端技術</h3>
              <span
                >在當今社會中,Web 已經成為網絡信息共享和發布的主要形式。要想開發 Web 應用
                系統,就必須掌握 Web 前端技術。</span
              >
            </body>
          </html>

          顯示為,

          (2)CSS 中鏈接標簽可用的偽類:

          • a:link
          • a:hover
          • a:active
          • a:visited

          CSS 中,偽類是添加到選擇器的關鍵字,給指定元素設置一些特殊狀態,我們以 : 開頭。

          鏈接有以下四個狀態。這四種狀態也稱之為超鏈接的偽類。

          狀態

          效果

          a:link

          普通的、未被訪問的鏈接。

          a:hover

          鼠標指針位于鏈接的上方。

          a:active

          鏈接被單擊的時刻。

          a:visited

          用戶已訪問的鏈接。

          針對超鏈接的上述四種狀態設置樣式規則,能起到美化超鏈接的作用。例如,為了完成下對超鏈接的顯示要求,編寫的 CSS 樣式代碼如下。

          狀 態

          顏 色

          背 景 色

          文 本 修 飾

          未訪問

          藍色

          無下畫線

          鼠標移到

          黑色

          #DDDDDD

          下畫線

          正單擊

          紅色

          #AAAAAA

          刪除線

          已訪問

          綠色

          無下畫線

          對于超鏈接的偽類,我們推薦的使用順序是::link - :visited - :hover - :active。

          例子,

          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>Document</title>
              <style>
                * {
                  text-decoration: none;
                }
                a:link {
                  color: red;
                }
                a:visited {
                  color: blue;
                }
                a:hover {
                  color: green;
                }
                a:active {
                  color: yellow;
                }
              </style>
            </head>
            <body>
              <a href="#">這是一個鏈接</a>
            </body>
          </html>
          

          顯示為,

          為什么要按照這樣的順序來使用呢? 調整幾個偽類的順序,看看會發生什么。

          我們把 a:link 放到最后,效果如下:

          從圖中可以發現其中的樣式屬性都被覆蓋了。

          (3)列表相關的樣式屬性:

          • list-style 屬性
          • list-style-image 屬性
          • list-style-position 屬性
          • list-style-type 屬性

          屬 性

          可 取 值

          描 述

          list-style

          list-style-type、list-style-position、list-style-image

          在一個聲明中設置所有的列表屬性

          list-style-image

          URL、none

          設置圖像為列表項標志

          list-style-position

          inside、outside、inherit

          設置列表中列表項標志的位置

          list-style-type

          disc(默認)、circle、square、decimal 等

          設置列表項標志的類型

          例子,

          wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif

          譯自: https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/

          作者: Sirko Kemter

          譯者: David Dai

          歡迎回到我們為了構建更快網頁所寫的系列文章。本系列的 第一部分 和 第二部分 講述了如何通過優化和替換圖片來減少瀏覽器脂肪。本部分會著眼于在 CSS( 層疊式樣式表 )和字體中減掉更多的脂肪。

          調整 CSS

          首先,我們先來看看問題的源頭。CSS 的出現曾是技術的一大進步。你可以用一個集中式的樣式表來裝飾多個網頁。如今很多 Web 開發者都會使用 Bootstrap 這樣的框架。

          這些框架當然方便,可是很多人都會將整個框架直接復制粘貼走。Bootstrap 非常大:目前 Bootstrap 4.0 的“最小”版本也有 144.9 KB. 在這個以 TB 來計數據的時代,它可能不算多。但就像所說的那樣,一頭小牛也能搞出大麻煩。

          我們回頭來看 getfedora.org 的例子。我們在 第一部分 中提過,第一個分析結果顯示 CSS 文件占用的空間幾乎比 HTML 本身還要大十倍。這里顯示了所有用到的樣式表:



          那是九個不同的樣式表。其中的很多樣式在這個頁面中并沒有用上。

          移除、合并、以及壓縮/縮小化

          Font-awesome CSS 代表了包含未使用樣式的極端。這個頁面中只用到了這個字體的三個字形。如果以 KB 為單位,getfedora.org 用到的 font-awesome CSS 最初有 25.2 KB. 在清理掉所有未使用的樣式后,它只有 1.3 KB 了。這只有原來體積的 4% 左右!對于 Bootstrap CSS,原來它有 118.3 KB,清理掉無用的樣式后只有 13.2 KB,這就是差異。

          下一個問題是,我們必須要這樣一個 bootstrap.css 和 font-awesome.css 嗎?或者,它們能不能合起來呢?沒錯,它們可以。這樣雖然不會節省更多的文件空間,但瀏覽器成功渲染頁面所需要發起的請求更少了。

          最后,在合并 CSS 文件后,嘗試去除無用樣式并縮小它們。這樣,它們只有 4.3 KB 大小,而你省掉了 10.1 KB.

          不幸的是,在 Fedora 軟件倉庫中,還沒有打包好的縮小工具。不過,有幾百種在線服務可以幫到你。或者,你也可以使用 CSS-HTML-JS Minify ,它用 Python 編寫,所以容易安裝。現在沒有一個可用的工具來凈化 CSS,不過我們有 UnCSS 這樣的 Web 服務。

          字體改進

          CSS3 帶來了很多開發人員喜歡的東西。它可以定義一些渲染頁面所用的字體,并讓瀏覽器在后臺下載。此后,很多 Web 設計師都很開心,尤其是在他們發現了 Web 設計中圖標字體的用法之后。像 Font Awesome 這樣的字體集現在非常流行,也被廣泛使用。這是這個字體集的大小:

          current free version 912 glyphs/icons, smallest set ttf 30.9KB, woff 14.7KB, woff2 12.2KB, svg 107.2KB, eot 31.2

          所以問題是,你需要所有的字形嗎?很可能不需要。你可以通過 FontForge 來去除這些無用字形,但這需要很大的工作量。你還可以用 Fontello . 你可以使用公共實例,也可以配置你自己的版本,因為它是自由軟件,可以在 Github 上找到。

          這種自定義字體集的缺點在于,你必須自己來托管字體文件。你也沒法使用其它在線服務來提供更新。但與更快的性能相比,這可能算不上一個缺點。

          總結

          現在,你已經做完了所有對內容本身的操作,來最大限度地減少瀏覽器加載和解釋的內容。從現在開始,只有服務器的管理技巧才才能幫到你了。

          有一個很簡單,但很多人都做錯了的事情,就是使用一些智能緩存。比如,CSS 或者圖片文件可以緩存一周。但無論如何,如果你用了 Cloudflare 這樣的代理服務或者自己構建了代理,首先要做的都應該是縮小頁面。用戶喜歡可以快速加載的頁面。他們會(默默地)感謝你,服務器的負載也會更小。


          via: https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/

          作者: Sirko Kemter 選題: lujun9972 譯者: StdioA 校對: wxy

          本文由 LCTT 原創編譯, Linux中國 榮譽推出

          點擊“了解更多”可訪問文內鏈接


          主站蜘蛛池模板: 精品少妇一区二区三区在线 | 无码AV中文一区二区三区| 成人精品视频一区二区| 精品视频一区二区| 极品少妇一区二区三区四区| 国产伦理一区二区| 香蕉视频一区二区三区| 国产一区二区三区播放心情潘金莲 | 亚洲国产精品无码第一区二区三区 | 国产在线第一区二区三区| 麻豆一区二区免费播放网站| 久久se精品一区二区| 久久国产一区二区三区| 国产在线精品一区二区三区不卡| 国产天堂在线一区二区三区| 天堂一区二区三区在线观看| 国产午夜精品一区理论片| 亚洲人成网站18禁止一区| 又紧又大又爽精品一区二区| 在线视频亚洲一区| 人妻体内射精一区二区| 制服中文字幕一区二区| 国产精品女同一区二区久久 | 天堂一区二区三区在线观看| 亚洲熟女综合色一区二区三区| 亚洲综合无码一区二区三区| 中文字幕一区二区三区久久网站 | 国产一区二区在线观看麻豆 | 一区二区在线电影| 日韩免费无码视频一区二区三区 | 亚洲日韩AV一区二区三区中文| 一本大道在线无码一区| 亚洲AV成人精品一区二区三区| 亚洲变态另类一区二区三区| 相泽南亚洲一区二区在线播放 | 国产av一区最新精品| 日本免费一区二区三区最新| 一区二区三区免费高清视频| 精品国产免费一区二区三区香蕉| 无码欧精品亚洲日韩一区| 麻豆一区二区免费播放网站|