iconfont (svgs2fonts) によって引き起こされる svg、ttf、woff、woff2 アイコンの調査と変換

iconfont に起因する svg、ttf、woff、woff2 アイコンの調査と変換

1.背景

実は、アイコンフォントを使ってアイコンの管理と統一を実現したいとずっと前から考えていたのですが（一方で、怠けるため、いや、エンジニアリングです）、何らかの理由で今まで延期されていました。。

個人的には、iconfont には 3 つの最大の利点があると感じています。それは、ベクターアイコン
です。写真を切り出すのと比べれば、少なくともブレることはありません。-制御可能な色。写真を切り取るのと比べて、少なくとも色を変えることができます。-管理と呼び出しが簡単。写真を切り取るのに比べれば、少なくとも忘れられません。-リクエストを減らす。すべてのアイコンに対して 1 つのリクエストのみが使用されます。

自由に使ってみると、その原理に興味が湧きました...

1.1 アイコンフォント

アイコンフォント公式サイト： http: //www.iconfont.cn/

Alimama MUX は、ベクターアイコンの管理および通信プラットフォームです。デザイナーはアイコンを Iconfont プラットフォームにアップロードし、ユーザーはアイコンをカスタマイズして複数の形式でダウンロードできるほか、アイコンをフォントに変換することもできるため、フロントエンドエンジニアはアイコンを自由に調整して呼び出すことができます。

1.2 アイコムーン

icomoon公式サイト： https: //icomoon.io

例:デモ

2 比較

2.1 結果パッケージ

アイコンフォント

ダウンロードしたアイコンの結果ディレクトリを図のように整理しました。
- HTML のうち 3 つは 3 つの使用方法のデモです。ページ内ではそれぞれの利点と比較が具体的に説明されています。セマンティクスと互換性を考慮して、fontclass を使用しました。 - 「iconfont
. svg" はアイコンライブラリの svg 形式ファイルです。
- "iconfont.eot"、"iconfont.ttf"、"iconfont.woff" はアイコンライブラリのフォント形式ファイルです。

2.2 svg、eot、ttf、woffの比較

ここでの SVG は svg フォントを指すことに注意してください。

2.2.1 はじめに

SVG / SVGZ

SVG (Scalable Vector Graphics) は、2 次元のベクターグラフィックスを記述するために使用されるグラフィックス形式です。Web で SVG を使用すると、ビットマップの拡大と歪みの問題を解決できます。

TTF / OTF

TTF (TrueTypeFont) は、Apple と Microsoft が共同で開発したフォントファイル形式で、Windows の普及に伴い、最も一般的に使用されるフォントファイル表現方法になりました。この形式は違法にコピーされやすかったため、後の WOFF フォント形式が誕生しました。

EOT

EOT (Embedded Open Type) は、Microsoft によって作成されたフォント形式です。この形式は IE6 ～ IE8 でのみ使用されます。

WOFF

WOFF (Web Open Font Format) は、Web ページで使用されるフォント形式の標準です。このフォント形式は 2009 年に開発され、現在 World Wide Web コンソーシアムの Web フォントワーキンググループによって標準化され、推奨標準となっています。このフォント形式は、圧縮を効果的に使用してファイルサイズを削減するだけでなく、暗号化を含まず、DRM (デジタル著作権管理) の制限を受けません。WOFF フォントは、OTF および TTF フォントで使用されるストレージ構造と圧縮アルゴリズムにより、通常、他のフォントよりも高速にロードされます。このフォント形式には、メタ情報やライセンス情報も含めることができます。

WOFF2(*)

WOFF2 (Web Open Font Format 2.0) では、woff と比較して最大の最適化は、フォントの圧縮率を高めることです。

2.2.2 サイズ

アイコンのフォントサイズ

woff2(*) < woff < ttf ≈ eot < svg

リクエスト量の観点から見ると、woff\woff2 形式のアイコンライブラリが最も小さくなります。

2.2.3 互換性

@フォントフェイス：

基本的には完全互換
フォントフェイスの互換性

svgフォント：

iOS、Safari、ローエンド Android と互換性あり
svgfont互換

エオト：

IEのみ
eot互換性あり

ttf：

基本的に互換性があるが、IEとの互換性はあまり良くない
ttf互換

ウォフ：

IE9以上、android4.4以上、その他互換性あり
WOFF互換

woff2(*)：

IEとローシステムモバイル端末を除き、その他の互換性は良好
woff2対応

上の図から判断すると
、フォントフェイスのサポートは良好で、アイコンはフォントを使用して実現できます。
- woff 形式は PC との互換性が高く、ttf は IE と互換性がなく、svgfont は Safari とのみ互換性があり、eot は Safari とのみ互換性があります。 IE. IE8 と互換性を持たせたい場合は、eot と組み合わせる必要があります;
- Eot はモバイルでは完全に互換性がありません. svgfont はローエンドシステムと非常に互換性がありますが、なぜハイエンド Android では互換性がなくなったのかわかりません工場出荷時の互換性要件 (ios8.0、android4.0) のより特殊なものを考慮すると、最も適切なのは woff 形式と ttf 形式と思われます。

サイズと互換性を考慮すると、最初は woff 形式を使用できます (Android 4.0 との互換性を確保したい場合は ttf が推奨されます)。IE の下位バージョンとの互換性を確保したい場合は、iconfont と同様に eot 形式を使用する必要があります。 css:

@font-face {
    
    font-family: "iconfont";
  src: url('iconfont.eot?t=1532589026137'); /* IE9*/
  src: url('iconfont.eot?t=1532589026137#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUkAAsAAAAAB4AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW70ftY21hcAAAAYAAAABcAAABhplABr5nbHlmAAAB3AAAAVgAAAFsZoj2dmhlYWQAAAM0AAAALwAAADYSH23BaGhlYQAAA2QAAAAgAAAAJAfgA4NobXR4AAADhAAAAAwAAAAMC+kAAGxvY2EAAAOQAAAACAAAAAgAdgC2bWF4cAAAA5gAAAAfAAAAIAESAF1uYW1lAAADuAAAAUUAAAJtPlT+fXBvc3QAAAUAAAAAIgAAADPge++EeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sE4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxjYm7438AQw9zI0AgUZgTJAQAjlgxweJzFkMENgDAMAy9p6QMxCA8G4sUcnbhrFBPKgwlqybHiWEoUYAGSeIgZ7MJ4cMq18BNr+DkyRWo4tXnv6j9VRLMS6iqFabB5q//You6j01eogzqx+Uv8BlHvC5d4nA2PrU7DUABG73dLu3Zs7e7tf7d1a7vtQoCFtWWIhWEwEAQJCkXwDEcwJIAgQSB4ABAQEhwOh+JNCLwCjhT65Ygjz0dkQv4+pXfJIyZZICOyRfYIgbKEWKdtRCIf0iXYkWy7li6JRESVJB5KG3BjxXLScT5wlYpiQEeILErHYkgF1vIpnSB12oDfDPZ5v8WlO1Q9EV4XO/QJdidpGdOVYnt500q7pnpW49zn/FZVZFmldM7QMXMdTdaqSvEsG4H93lmkHdR8Eewe1LtNfnSTn7T7rgZcXsJsdvWXTRawkvPAMblfadRVL6gnPQtn3/OeWWsPvkg5Wn69mIN0RXpEEKJhEFeg2JYzAbPCMplNsZ6FcFlWCsvS8aCfjaSfIlZdrQhrrD6ze6utU1jGq2HhJRniWGf09w14w4emFtMqN8zioTNedPHIHMBhxSFygXuv2SD/wk87NXicY2BkYGAA4kPBpYHx/DZfGbhZGEDgev2URwj6fz0LI3MjkMvBwAQSBQA9GQs1AHicY2BkYGBu+N/AEMPCwMDw/z8LIwNQBAUwAwBx8QRrBAAAAAPpAAAEAAAAAAAAAAB2ALZ4nGNgZGBgYGYIZGBlAAEmIOYCQgaG/2A+AwAQ9wFwAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgJmRiZGZkYWBsYK1KqO0MpWBAQASpALPAAA=') format('woff'),
  url('iconfont.ttf?t=1532589026137') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1532589026137#iconfont') format('svg'); /* iOS 4.1- */
}

3 変換

美しく寛大な UI ガールの説明によると、iconfont プラットフォームでフォントアイコンのセットを生成するには、UI がアイコンの svg ファイルをアップロードする必要があります。生成されたパッケージ内の svg アイコンライブラリのソースは非常に明確です。最も簡単な方法は、UI によってアップロードされた svg ファイルを処理することです。次に、他の ttf/eot/woff フォントファイルはどのように生成されるのかという疑問が生じます。

このセクションの変換プロセスはnodejsで実装されていますが、実装についてのみ説明しており、原理はわかりません。苦手な学生は直接読み飛ばしてください~

ディレクトリ構造:
§─dist アイコンアドレス生成
§─node_modules
§─src ソースファイル
│ └─svg
§─index.html テスト html
§─index.js ノードスクリプト
└─package.json

3.1 svgfontへの変換

依存関係パッケージ: svgicons2svgfont
準備: いくつかの svg アイコンファイル

例

スクリプト (index.js):

    const join = require('path').join;
    const fs = require('fs');
    const SVGIcons2SVGFontStream = require('svgicons2svgfont');

    const DIST_PATH = join(__dirname, 'dist/iconfont.svg');


    // init
    const fontStream = new SVGIcons2SVGFontStream({
      fontName: 'iconfont'      // 字体名（font-family）
    });

    // 设置导出svgfont文件
    fontStream.pipe(fs.createWriteStream(DIST_PATH))     // 导出的svgfont文件路径
      .on('finish', function() {
    
         // 完成
        console.log(`SvgFont successfully created!(${DIST_PATH})`)
      })
      .on('error', function(err) {
    
       // 错误
        console.log(err);
      });

    // add icon1
    const glyph1 = fs.createReadStream(join(__dirname, 'src/svg/ad-1.svg'));    // svg路径
    glyph1.metadata = {
      unicode: ['\uE001'],    // unicode
      name: 'icon1'                 // icon名
    };
    fontStream.write(glyph1);

    // add icon2
    const glyph2 = fs.createReadStream(join(__dirname, 'src/svg/add-pluss-1.svg'));
    glyph2.metadata = {
      unicode: ['\uE002'],
      name: 'icon2'
    };
    fontStream.write(glyph2);

    fontStream.end();   // end

実行: node index
svgfont コマンド
dist ディレクトリに生成された「iconfont.svg」ファイルが表示されます。

SVG ソースコードを表示します。
SVGソースコード

(index.html) の使用:

    <style type="text/css">
        @font-face {
     
     font-family: "iconfont";
            src: url('dist/iconfont.svg#iconfont') format('svg');
        }
        .u-iconfont{
            display: inline-block;
            font-family:"iconfont" !important;
            font-size:26px;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>

    <h1>iconfont——svgfont</h1>
    <div>
        <em class="u-iconfont">&#xE001;</em>
        <em class="u-iconfont">&#xE002;</em>
    </div>

ページ表示:
SVGフォントの結果

3.2 svgfont から ttf へ

依存関係パッケージ: svg2ttf
準備：svgfontファイル

例

スクリプト (index.js):

    const fs = require('fs');
    const join = require('path').join;
    const svg2ttf = require('svg2ttf');

    const DIST_PATH = join(__dirname, 'dist/iconfont.ttf');     // 输出地址

    let ttf = svg2ttf(fs.readFileSync(join(__dirname, 'dist/iconfont.svg'), 'utf8'), {});
    fs.writeFile(DIST_PATH, new Buffer(ttf.buffer), (err, data) => {
        if (err) {
            console.log(err);
            return false;
        }

        console.log(`Ttf icon successfully created!(${DIST_PATH})`)
    });

(index.html) の使用:

    <style type="text/css">
        @font-face {
     
     font-family: "iconfont";
            src: url('dist/iconfont.ttf#iconfont') format('truetype');
        }
        .u-iconfont{
            display: inline-block;
            font-family:"iconfont" !important;
            font-size:26px;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>

    <h1>iconfont——svgfont</h1>
    <div>
        <em class="u-iconfont">&#xE001;</em>
        <em class="u-iconfont">&#xE002;</em>
    </div>

実行: node index
ttfコマンド
dist ディレクトリに生成された「iconfont.ttf」ファイルが表示されます。

ページ表示:
TTFの結果

3.3 ttfからeotへ

依存関係パッケージ: ttf2eot
準備作業：ttfファイル

スクリプト (index.js):

    const fs = require('fs');
    const join = require('path').join;
    const ttf2eot = require('ttf2eot');

    const DIST_PATH = join(__dirname, 'dist/iconfont.eot');     // 输出地址

    let ttf = fs.readFileSync(join(__dirname, 'dist/iconfont.ttf'));

    let eot = new Buffer(ttf2eot(ttf).buffer);

    fs.writeFile(DIST_PATH, eot, (err, data) => {
        if (err) {
            console.log(err);
            return false;
        }

        console.log(`Eot icon successfully created!(${DIST_PATH})`)
    });

(index.html) の使用:

    <style type="text/css">
        @font-face {
     
     font-family: "iconfont";
            src: url('dist/iconfont.eot'); /* IE9*/
            src: url('dist/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
        }
        .u-iconfont{
            display: inline-block;
            font-family:"iconfont" !important;
            font-size:26px;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>

    <h1>iconfont——eot</h1>
    <div>
        <em class="u-iconfont">&#xE001;</em>
        <em class="u-iconfont">&#xE002;</em>
    </div>

実行: node index
eotcmd
dist ディレクトリに生成された「iconfont.eot」ファイルが表示されます。

ページ表示（IE）：

3.3 ttfからwoffへ

依存関係パッケージ: ttf2woff
準備作業：ttfファイル

スクリプト (index.js):

    const fs = require('fs');
    const join = require('path').join;
    const ttf2woff = require('ttf2woff');

    const DIST_PATH = join(__dirname, 'dist/iconfont.woff');     // 输出地址

    let ttf = fs.readFileSync(join(__dirname, 'dist/iconfont.ttf'));

    let woff = new Buffer(ttf2woff(ttf).buffer);

    fs.writeFile(DIST_PATH, woff, (err, data) => {
        if (err) {
            console.log(err);
            return false;
        }

        console.log(`Woff icon successfully created!(${DIST_PATH})`)
    });

(index.html) の使用:

    <style type="text/css">
        @font-face {
     
     font-family: "iconfont";
            src: url('dist/iconfont.woff#iconfont') format('woff');
        }
        .u-iconfont{
            display: inline-block;
            font-family:"iconfont" !important;
            font-size:26px;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>

    <h1>iconfont——woff</h1>
    <div>
        <em class="u-iconfont">&#xE001;</em>
        <em class="u-iconfont">&#xE002;</em>
    </div>

実行: node index
ウォフコマンド
dist ディレクトリに生成された「iconfont.woff」ファイルが表示されます。

ページ表示:
ウォフ結果

3.4 ttf から WOFF2 (*)

依存関係パッケージ: ttf2woff2
準備作業：ttfファイル

スクリプト (index.js):

    const fs = require('fs');
    const join = require('path').join;
    const ttf2woff2 = require('ttf2woff2');

    const DIST_PATH = join(__dirname, 'dist/iconfont.woff');     // 输出地址

    let ttf = fs.readFileSync(join(__dirname, 'dist/iconfont.ttf'));

    let woff2 = new Buffer(ttf2woff2(ttf).buffer);

    fs.writeFile(DIST_PATH, woff2, (err, data) => {
        if (err) {
            console.log(err);
            return false;
        }

        console.log(`Woff2 icon successfully created!(${DIST_PATH})`)
    });

(index.html) の使用:

    <style type="text/css">
        @font-face {
     
     font-family: "iconfont";
            src: url('dist/iconfont.woff2#iconfont') format('woff2');
        }
        .u-iconfont{
            display: inline-block;
            font-family:"iconfont" !important;
            font-size:26px;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>

    <h1>iconfont——woff2</h1>
    <div>
        <em class="u-iconfont">&#xE001;</em>
        <em class="u-iconfont">&#xE002;</em>
    </div>

実行: node index
woff2cmd
dist ディレクトリに生成された「iconfont.woff2」ファイルが表示されます。

ページ表示:
woff2の結果

4 svgs2フォント

上記のプラグインを組み合わせて、バッチ変換パッケージを自分で作成しました。——svgs2fonts: svg アイコンからフォントアイコンライブラリへ (svgs -> svg、ttf、eot、woff、woff2)。

原理は簡単です。

    svgs -> svg font > ttf > eot/woff/woff2

4.1 インストールと使用方法

インストール：

    npm i -g svgs2fonts

確認する：

    svgs2fonts -v

使用：

cmd

    svgs2fonts {
    
    {
    
    srcpath}} {
    
    {
    
    distpath}} --options

srcpath: svg ソースファイルパス (現在のウィンドウ環境に相対)、「」を渡す場合、それは現在のウィンドウパスになります。
distpath: エクスポートパス、デフォルトはソースファイルパスです。

ノードjs

const svgs2fonts = require('svgs2fonts');
    const join = require('path').join;

    svgs2fonts.init({
        src: __dirname,     // svg path
        dist: join(__dirname, 'dest'),  // output path
        fontName: 'myIconfont', // font name
        startNumber: 20000  // unicode start number
        nodemo: true        // no demo html files
    });

例

    svgs2fonts svg dist

パラメータ

-n / –名前

アイコンライブラリの名前 (デフォルト: 「iconfont」)。

例

    svgs2fonts svg dist -n myiconfont

-番号

Unicode 開始エンコード (デフォルト: 10000)。

例

    svgs2fonts svg dist --number 50000

-ノードデモ

HTML のデモを行わないでください。

例

    svgs2fonts svg dist --nodemo

結果を生成します。
svgs2フォント

demo_fontclass.html: クラスを使用して表示されるデモページ。
demo_unicode.html: Unicode を使用して表示されるデモページ。

>>テキストブログのアドレス
提案がある場合、または卵を割りたい場合 -> [email protected]