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

@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 つの機能があります:

1. フォントの抽出
2. フォント形式の変換
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/

Fontmin ベースのツール

• fontmin-app - Fontmin デスクトップ アプリをダウンロードしてインストールする必要があります
• gulp-fontmin - Fontmin 用の Gulp プラグイン
• font-spider - ページで使用される WebFont を自動的に分析し、オンデマンド圧縮を実行します

Web-fontmin

さて、散々話しましたが、ようやく記事の本題に入ります。

Web-fontmin は、Fontmin に基づいて構築されたフォント ツールです。使用方法は 2 つだけです。

1. フォントの抽出
2. 変換

平たく言えば、Web-fontmin は、Squirrel + fontmin-app のようなツールで、この 2 つを組み合わせたものです。

Squirrel はさまざまな形式の Web フォントのみを生成し、中国語はサポートしません。 Web-fontmin は形式を変換して中国語をサポートするだけでなく、フォントを抽出することもでき、アップロードと変換の速度が速くなります。

Fontmin アプリの主な機能はフォントを抽出することであり、ダウンロードしてインストールする必要があり、Linux はサポートされていません。 Web-Fontmin は Fontmin アプリのすべての機能を備えており、オンラインで利用できます。

Web-fontmin の使用: http://fontmin.forsigner.com/

Github アドレス: web-fontmin

Web ページの効果:

一般的に使用されるフリー フォント Web サイト

Wangzhang のダウンロードに推奨されるいくつかの一般的に使用されるフォント: