Web-Fontmin は必要なフォントを抽出します online_html/css

Web-Fontmin は必要なフォントを抽出します online_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:54:33

オリジナル

1911 人が閲覧しました

@font-face について

@font-face は CSS3 のモジュールであり、ユーザーのコンピュータに Web フォントがない場合でも、@font-face を使用して Web フォントをカスタマイズできます。とあるフォント。 @font-faceの使い方は？以下のようなコードスニペットを見たことがあるかもしれません。これにより、@font-face がすべてのブラウザーで互換性を持つようになります。

@font-face {    font-family: "SentyZHAO";    src: url("/fonts/SentyZHAO.eot"); /* IE9 */    src: url("/fonts/SentyZHAO.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */    url("/fonts/SentyZHAO.woff") format("woff"), /* chrome, firefox */    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */    url("/fonts/SentyZHAO.ttf") format("truetype"),     url("/fonts/SentyZHAO.svg#SentyZHAO") format("svg"); /* iOS 4.1- */    font-style: normal;    font-weight: normal;}

ログイン後にコピー

Webfont Generator - Font Squirrel

上記のコードスニペットからわかるように、@font-face を互換性よく使用するには、eot、woff、ttf、svg も必要です。フォントの書式設定。一般的に使用されるツールは、eot、woff、ttf、svg 形式のフォントをオンラインで生成できるフォントジェネレーターです。多くのフロントエンドで使用されていると思います。具体的な使用方法については、公式 Web サイトで試すことができます。

Fontmin

初の純粋な JavaScript フォントサブセットソリューションであり、Baidu が開発した優れたツールです。フォントミンは何に使用されますか?

Web フォントの開発を促進し、Web テキストのエクスペリエンスを向上させるための ttf サブセット化、eot/woff/svg 形式変換、CSS 生成およびその他の機能を提供します。

上記は公式の声明です。大まかに言うと、次の 3 つの機能があります:

フォントの抽出
フォント形式の変換
Web フォントと対応する CSS スタイルを生成する

Fontmin アプリケーションシナリオ

Web サイトのロゴ、スローガン、タイトル、イベントページなどに中国語フォントをカスタマイズしたい場合があります。 use @font-face は Web フォントを導入していますが、完全な中国語フォントライブラリは 8M ～ 10M あり、読み込みパフォーマンスが非常に悪いため、使用するフォントの一部を抽出して、フォントファイルを数 KB に削減します。

Fontmin の使用法

Fontmin の使用法は非常に簡単です:

var Fontmin = require('fontmin');var fontmin = new Fontmin()    .src('fonts/*.ttf')    .dest('build/fonts');fontmin.run(function (err, files) {    if (err) {        throw err;    }    console.log(files[0]);    // => { contents: <Buffer 00 01 00 ...> }});

ログイン後にコピー

詳しい紹介と使用法については、この記事をご覧ください: http://efe.baidu.com /blog /fontmin-getting-started/