2. 程式人生 > >字體庫

字體庫

阿新 • • 發佈：2019-03-01
shortcut 用法 調整 字體庫 註意 pla onf 模式 gtm

Font Awesome

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

The iconic SVG, font, and CSS toolkit https://fontawesome.com

完美的圖標字體
只為Bootstrap設計

Iconfont

https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=8314

阿裏媽媽MUX傾力打造的矢量圖標管理、交流平臺。
設計師將圖標上傳到Iconfont平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖標轉換為字體，便於前端工程師自由調整與調用。

下載的文件：

各種字體文件描述如下鏈接。

https://www.jianshu.com/p/0d3be9b77eb9

技術分享圖片

網頁效果，網頁上也有使用說明：

技術分享圖片

CODE

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico"
 
 type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src
 
="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代碼高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首頁" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">秒殺</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">喜歡</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">應用</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">首頁</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe738;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字體在網頁端最原始的應用方式，特點是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有現代瀏覽器。</li>
            <li>支持按字體的方式去動態調整圖標大小，顏色等等。</li>
            <li>但是因為是字體，所以不支持多色。只能使用平臺裏單色的圖標，就算項目裏有多色圖標也會自動去色。</li>
          </ul>
          <blockquote>
            <p>註意：新版 iconfont 支持多色圖標，這些多色圖標在 Unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步驟如下：</p>
          <h3 id="-font-face">第一步：拷貝項目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: ‘iconfont‘;
  src: url(‘iconfont.eot‘);
  src: url(‘iconfont.eot?#iefix‘) format(‘embedded-opentype‘),
      url(‘iconfont.woff2‘) format(‘woff2‘),
      url(‘iconfont.woff‘) format(‘woff‘),
      url(‘iconfont.ttf‘) format(‘truetype‘),
      url(‘iconfont.svg#iconfont‘) format(‘svg‘);
}
</code></pre>
          <h3 id="-iconfont-">第二步：定義使用 iconfont 的樣式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑選相應圖標並獲取字體編碼，應用於頁面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你項目下的 font-family。可以通過編輯項目查看，默認是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-miaosha"></span>
            <div class="name">
              秒殺
            </div>
            <div class="code-name">.icon-miaosha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xihuan"></span>
            <div class="name">
              喜歡
            </div>
            <div class="code-name">.icon-xihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingyong"></span>
            <div class="name">
              應用
            </div>
            <div class="code-name">.icon-yingyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首頁
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語意不明確的問題。</p>
        <p>與 Unicode 使用方式相比，具有如下特點：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有現代瀏覽器。</li>
          <li>相比於 Unicode 語意明確，書寫更直觀。可以很容易分辨這個 icon 是什麽。</li>
          <li>因為使用 class 來定義圖標，所以當要替換圖標時，只需要修改 class 裏面的 Unicode 引用。</li>
          <li>不過因為本質上還是使用的字體，所以多色圖標還是不支持的。</li>
        </ul>
        <p>使用步驟如下：</p>
        <h3 id="-fontclass-">第一步：引入項目下面生成的 fontclass 代碼：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑選相應圖標並獲取類名，應用於頁面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你項目下的 font-family。可以通過編輯項目查看，默認是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-miaosha"></use>
                </svg>
                <div class="name">秒殺</div>
                <div class="code-name">#icon-miaosha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xihuan"></use>
                </svg>
                <div class="name">喜歡</div>
                <div class="code-name">#icon-xihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingyong"></use>
                </svg>
                <div class="name">應用</div>
                <div class="code-name">#icon-yingyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首頁</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇<a href="">文章</a>
            這種用法其實是做了一個 SVG 的集合，與另外兩種相比具有如下特點：</p>
          <ul>
            <li>支持多色圖標了，不再受單色限制。</li>
            <li>通過一些技巧，支持像字體那樣，通過 <code>font-size</code>, <code>color</code> 來調整樣式。</li>
            <li>兼容性較差，支持 IE9+，及現代瀏覽器。</li>
            <li>瀏覽器渲染 SVG 的性能一般，還不如 png。</li>
          </ul>
          <p>使用步驟如下：</p>
          <h3 id="-symbol-">第一步：引入項目下面生成的 symbol 代碼：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代碼（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑選相應圖標並獲取類名，應用於頁面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $(‘.tab-container .content:first‘).show()

      $(‘#tabs li‘).click(function (e) {
        var tabContent = $(‘.tab-container .content‘)
        var index = $(this).index()

        if ($(this).hasClass(‘active‘)) {
          return
        } else {
          $(‘#tabs li‘).removeClass(‘active‘)
          $(this).addClass(‘active‘)

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>

Other Use Reference：

https://blog.csdn.net/slqt_6688/article/details/81188636

http://www.cnblogs.com/hjvsdr/p/6639649.html

字體庫

相關推薦

好看的網頁字體庫

clas div 點擊 mic family box sans open lose 1. comic sans ms 點擊預覽 點擊關閉 好看的網頁字體庫

uwp 獲取系統字體庫

for 一個 arp cti src ++ AC blog lse 原文:uwp 獲取系統字體庫效果圖： 要獲取到字體庫首先要在 NuGet 添加 SharpDx.Direct2D1 api: /// <summary>

Not Found woff 字體庫

添加 true ica VG mem 默認 只需要 們的 svg 原因是，默認在IIS上是沒有添加對*.woff,*.svg文件的Mime類型，因此在客戶端請求此類文件時得到的都是404。 所以我們只需要在我們對應網站下的Mime類型中添加文件對應的類型就行了 .wo

嵌入式Qt-4.8.6顯示中文並且改變字體大小和應用自己制作的字體庫

number BE string 直接 HA 字體庫 tgui AI 但是 問題： QT4.8.6在移植到開發板上的時候，中文支持是必不可少的，如何讓ＱＴ支持中文，如何制作ＱＴ支持的字體文件，如何使ＱＴ ＵＩ編輯器中的字號與開發板中的字號一致。 詳解： 1>如何讓ＱＴ

字體庫

shortcut 用法 調整 字體庫 註意 pla onf 模式 gtm Font Awesome http://www.bootcss.com/p/font-awesome/ The iconic SVG, font, and CSS toolkit https:

Font Awesome,一套絕佳的圖標字體庫和CSS框架

大小 ont www 使用 -s size css框架 targe col http://fontawesome.dashgame.com/ http://www.runoob.com/font-awesome/fontawesome-tutorial.html Fon

webpack熱更新問題和antd design字體圖標庫擴展

成功 其他 一加 是你 sign 你在 一個 兩個 pri 附一張上周末參加jsconf的照片。。。。。 標題也不知道怎麽寫好，真是尷尬。不過話說回來，距離上一次寫文快兩個月了，最近有點忙，一直在開發新項目， 今天剛剛閑下來，項目準備提測。借這個功夫寫點東西，把新項目上學到

封裝字體圖標庫

lvm -m RM form pen details div 阿裏 orm 參考了以下博客: https://blog.csdn.net/Doulvme/article/details/54290450 https://blog.csdn.net/qq_25479327/a

使用font-awesome字體圖標庫，讓你的網站好看10倍

加載速度 amp 公眾 link 必備 減少 user src 字體 前言 在網站開發中，往往需要加上一些圖標的點綴來使頁面顯得更加美觀和友好。但是對於一些缺乏設計能力的人員（比如本人），想自己制作一套好看的圖標比較麻煩。font-awesome可以幫助我們解決這個問題。

關於字體跨域

src main 文件的 .so pac http 不同的 外部 href 寫在前面的話： 　　跨域問題啊…………字體跨域，居然碰到了~~網上搜羅來的答案，有機會的可以試試有沒有效 　　原文：css加載字體的跨域問題 （轉載） 剛才碰到一個css加載字體跨域問題，記錄

IntelliJ IDEA 設置Output 窗口字體大小

ide water col setting blog watermark con colors ast Settings——>Editor——>Colors&Fonts——>C

項目經驗：Glyphicons字體圖標改造，制造適合自己項目的字體圖標

組件 不能 卓越 例如 文件夾 src 進行 alt get Bootstrap對我們來說已經不陌生了，大型的項目一定會用到它。它的DOM結構，字體圖標，組件，響應式布局等，很大程度上提高了WEB開發速度。 在bootstrap剛出來的時候，它擁有豐富的

iOS使用自己定義字體

arr fonts bsp mil overflow ret pro 保存 size 1.加入相應的字體(.ttf或.odf)到project的resurce，比如my.ttf。 2.在info.plist中加入一項 Fonts provided by applicat

使用Apache pdfbox: 從Linux安裝字體到log4j設置日誌級別

目錄 log erro warn 第三方jar ado logs brush apach 在使用Apache的pdfbox的過程中，因為Linux環境下沒有STSong-Light字體而報警告信息 (PDCIDFontType0.java:147) - Using fal

如何設置 input placeholder字體大小和顏色？

如何 webkit lac 顏色 explore -m row ace pla input::-webkit-input-placeholder { /* WebKit browsers*/ 　　color:#aaa;font-size:14px;　　}input:-moz

移動端用rem使字體自適應

對比 16px size 設置 自適應 使用 pre 感覺 字體大小 　rem是css3引入的新的單位，與px和em相對比，我感覺rem更加便利，尤其是對移動端的字體自適應布局。 　rem是根據HTML的字體大小進行設置的。 　而HTML的基本字體大小是16px，所以可

eclipse如何改變字體大小

.com color ges fonts eclipse ima 適合 分享 大小 Windows >>perferences General>> appearance>>Colors and Fonts 點開之後，在Basic 下面找

echarts各種字體顏色修改

orien ica tex eat lin 海水 條形圖 查詢 saveas 這篇文章主要講述Echarts設置字體和線條的顏色相關操作筆記，希望文章對你有所幫助，主要是自己的在線筆記吧。我在前面先放各種修改前後圖片顏色的對照，後面再詳細介紹代碼。這樣更方便閱讀及讀者知道，

【字體設計】如何更好的吸引人？不滿意不要錢！

字體設計 視覺設計 方塊字 漢字 藝術性 （提供專業、高效的字體設計服務，不滿意不收費，聯系QQ：3168579596）字體設計，點擊查看！>>　　在視覺設計工作中，幾乎每項任務都會使用到字體。字體具有非常多的風格，不同風格類型所表達的感情是不一樣的。但是通過一些簡單的字體改造

三、修改字體和字體大小

改字體 http 大小 src ges 字體大小 .com mage 技術 1. 2. 3. 三、修改字體和字體大小