遅刻した中国語WebFont
(フロントエンドエンジニア福音書、コレクション)
3年前、あるデザイナーがWebフロントエンドエンジニアを面接しました.その中にこのような会話がありました.
「デザイナーが画像でフォントスタイルを実現したいと思っているのに、技術的には合理的ではありませんが、デザイナーは非常に堅持しています.この時、あなたはどうしますか?」
例えば、テキストが画像を使用する場合、テンセントサイトのアクセス量で言えば、ここは大量のサーバー資源を消費し、少なくともXXX台のサーバーを増加し、帯域幅の流量がXXX万を消費する必要がある.......
これは本当の面接シーンで、私はその面接者です.ここ数年、Webフロントエンド技術は急速に発展しており、このような問題にはすでに解決策があります.WebFontは、その年の面接のシーンに戻れば、もっと良い答えを出すと思います.
WebFontテクノロジーは、画像を使用することなく、Webページにオンラインフォントを使用させることができ、デザイナーが最初に述べた問題を解決する機会があります.CSSの
WebFontのメリット
画像に対して、WebFontには次のようなメリットがあります.は、選択、コピー をサポートします.はCtrl+F検索 をサポートする検索エンジンに友好的 サポートツール翻訳 はバリアフリーアクセスをサポートし、朗読 をサポートする.フォントはベクトルグラフィックで、ベクトルスケーリングをサポートし、自動的に高スクリーン に適している.テキスト修正便利 字形は再利用可能で、ネットワーク資源 を節約する.
中国語WebFontのジレンマ
WebFontがこんなに多くの利点を持っている以上、なぜ中国語サイトは依然として採用されていないのですか?ここは主に3つの「中国の特色」がもたらしたものです.
中国語フォントボリューム
英語は26文字しかなく、1セットのフォントは数十KBにすぎない.漢字は数万個あり、フォントファイルは通常数MBの大きさがあり、ファイルの体積は英語のフォントより数百倍大きく、中国のネット環境の現状によると、実際のプロジェクトに使用するのは明らかに現実的ではない.
ブラウザのタイプ
国内のブラウザ市場は異常に繁栄しており、IE 6から各種シェルのブラウザまで、フォントフォーマットのサポートも異なり、フォントフォーマットの変換はかなり煩雑である.
オペレーティングシステム
かなり長い間、Windows XPオペレーティングシステムは国内の主流だったが、XPシステムはフォントレンダリングの表現が下手で、デザイナーはWebFontの表現を受け入れにくく、むしろ画像を使用した.しかし、XPシステムの市場シェアの急激な低下とモバイル機器の台頭に伴い、この問題はそれほど重要ではなくなった.
まとめてみると、中国語WebFontが最も解決している問題は、圧縮とトランスコードです.
既存の中国語WebFontソリューション
ローカル作成
フォント作成ツールを使用して使用していない文字を削除します.つまり、コンパクトなフォントを作成することも、私が以前実践した案です.
(図:フォント作成ツール——FontLab)
フォントクラウドサービス
国内では現在、中国語WebFontクラウド管理サービスを提供している2社があり、フォントを圧縮し、トランスコードすることができます. http://www.youziku.com http://cn.justfont.com 既存のシナリオの問題
実際には、ツールを使用してコンパクトなフォントを作成するのは非常に煩雑で、文字をよくチェックする必要があります.修正が非常に面倒で、効率が低下し、文字が漏れやすく、エラーが発生します.
サードパーティのクラウドサービスの最大の問題は、安定性が保証されていないことです.大量のユーザーのアクセスをサポートできるかどうかは疑問符です.少なくとも、この2つの中国語WebFontプラットフォームには、大規模なビジネスサイトがない場合があります.ほとんどは、小さな個人や企業のWebサイトが使用されています.
ローカルオートメーションWebFont圧縮構想
パフォーマンスと制御性の観点から、サードパーティのクラウドサービススキームを排除し、ローカルオートメーションスキームの設計を試みました.パートナーと議論する過程で、以前同僚が自動カットをしたツールを思い浮かべました.Photoshopをスクリプトで操作するのが原理ですが、フォントツールを自動化するスクリプトを書くことができますか?理論的にはOKで、私たちが試してみる価値があります.
フォント圧縮の鍵は、不要な文字を削除することです.フォントと使用する文字を指定するプロファイルを指定し、フォントツールを操作してフォントをコンパクトにすることができます.
前述したように、フォントを手動で構成する場合に使用される文字が漏れるリスクがあり、ページの変更のたびにプロファイルを同期的に変更する必要がある場合は、自動化された構成を実現できますか?
インスピレーションはいつも何気なく現れて、私達はまたCSSに目を向けました.CSS自体が1つの完全な配置ファイルであるためです:その
クモの誕生
このようなアイデアを実現するには、この3つのパートナーが必要です.解析モジュール:フォントとフォントを収集するために使用される文字 圧縮モジュール:フォントに使用されていない文字を削除する圧縮 を実現する.トランスコードモジュール:フォントをブラウザ間で使用するフォーマット に変換する.
オープンソースの力を借りて、ツールが迅速に実現され、以下のオープンソースプロジェクトの助けに感謝します. css.js:CSSを成語法ツリーに解析でき、様々なhack構文 に適応できる. jsdom:NodeJSでW 3 C DOM APIを実装することができ、 を検索することができます. font-optimizer:Perlを使用して作成されたフォント最適化ツール ttf 2 eot、ttf 2 woff、ttf 2 svg:ブラウザフォントフォーマットにまたがるトランスコードを完了する 成果
HTMLファイルのパスを指定すると、圧縮とトランスコードフォントが自動化され、手動で介入する必要がなく、フロントエンドのパブリケーションシステムに簡単に統合できます.
オープンソース
絶えず改善された後、私たちはツールを--字クモ(Font-Spider)と命名し、オープンソースコミュニティにフィードバックし、中国語WebFontの発展に力を入れ、より多くの中国語サイトが美しいフォントを使用できるようにしたいと思っています.技術は遅刻するが、欠席することはない.字クモ公式サイト:http://font-spider.org プロジェクト貢献者:@糖餅@fufu@kdd 出典遅れた中国語WebFont
3年前、あるデザイナーがWebフロントエンドエンジニアを面接しました.その中にこのような会話がありました.
「デザイナーが画像でフォントスタイルを実現したいと思っているのに、技術的には合理的ではありませんが、デザイナーは非常に堅持しています.この時、あなたはどうしますか?」
例えば、テキストが画像を使用する場合、テンセントサイトのアクセス量で言えば、ここは大量のサーバー資源を消費し、少なくともXXX台のサーバーを増加し、帯域幅の流量がXXX万を消費する必要がある.......
これは本当の面接シーンで、私はその面接者です.ここ数年、Webフロントエンド技術は急速に発展しており、このような問題にはすでに解決策があります.WebFontは、その年の面接のシーンに戻れば、もっと良い答えを出すと思います.
WebFontテクノロジーは、画像を使用することなく、Webページにオンラインフォントを使用させることができ、デザイナーが最初に述べた問題を解決する機会があります.CSSの
@font-face文を介してオンラインフォントを導入し、CSSセレクタを使用してフォントを使用するテキストを指定するとともに、Web展示専用のwoffフォーマットフォントも各ブラウザメーカーにサポートされ、フォントの体積をさらに減らすことができます.海外では、WebFontが非常に流行しており、多くのサイトがWebFont技術を使用しており、業界の大物Googleも勢いよく無料WebFontクラウドホスティングサービスを発売しており、海外のフォント制作業界の急速な発展を牽引している.WebFontのメリット
画像に対して、WebFontには次のようなメリットがあります.
中国語WebFontのジレンマ
WebFontがこんなに多くの利点を持っている以上、なぜ中国語サイトは依然として採用されていないのですか?ここは主に3つの「中国の特色」がもたらしたものです.
中国語フォントボリューム
英語は26文字しかなく、1セットのフォントは数十KBにすぎない.漢字は数万個あり、フォントファイルは通常数MBの大きさがあり、ファイルの体積は英語のフォントより数百倍大きく、中国のネット環境の現状によると、実際のプロジェクトに使用するのは明らかに現実的ではない.
ブラウザのタイプ
国内のブラウザ市場は異常に繁栄しており、IE 6から各種シェルのブラウザまで、フォントフォーマットのサポートも異なり、フォントフォーマットの変換はかなり煩雑である.
オペレーティングシステム
かなり長い間、Windows XPオペレーティングシステムは国内の主流だったが、XPシステムはフォントレンダリングの表現が下手で、デザイナーはWebFontの表現を受け入れにくく、むしろ画像を使用した.しかし、XPシステムの市場シェアの急激な低下とモバイル機器の台頭に伴い、この問題はそれほど重要ではなくなった.
まとめてみると、中国語WebFontが最も解決している問題は、圧縮とトランスコードです.
既存の中国語WebFontソリューション
ローカル作成
フォント作成ツールを使用して使用していない文字を削除します.つまり、コンパクトなフォントを作成することも、私が以前実践した案です.
(図:フォント作成ツール——FontLab)
フォントクラウドサービス
国内では現在、中国語WebFontクラウド管理サービスを提供している2社があり、フォントを圧縮し、トランスコードすることができます.
実際には、ツールを使用してコンパクトなフォントを作成するのは非常に煩雑で、文字をよくチェックする必要があります.修正が非常に面倒で、効率が低下し、文字が漏れやすく、エラーが発生します.
サードパーティのクラウドサービスの最大の問題は、安定性が保証されていないことです.大量のユーザーのアクセスをサポートできるかどうかは疑問符です.少なくとも、この2つの中国語WebFontプラットフォームには、大規模なビジネスサイトがない場合があります.ほとんどは、小さな個人や企業のWebサイトが使用されています.
ローカルオートメーションWebFont圧縮構想
パフォーマンスと制御性の観点から、サードパーティのクラウドサービススキームを排除し、ローカルオートメーションスキームの設計を試みました.パートナーと議論する過程で、以前同僚が自動カットをしたツールを思い浮かべました.Photoshopをスクリプトで操作するのが原理ですが、フォントツールを自動化するスクリプトを書くことができますか?理論的にはOKで、私たちが試してみる価値があります.
フォント圧縮の鍵は、不要な文字を削除することです.フォントと使用する文字を指定するプロファイルを指定し、フォントツールを操作してフォントをコンパクトにすることができます.
前述したように、フォントを手動で構成する場合に使用される文字が漏れるリスクがあり、ページの変更のたびにプロファイルを同期的に変更する必要がある場合は、自動化された構成を実現できますか?
インスピレーションはいつも何気なく現れて、私達はまたCSSに目を向けました.CSS自体が1つの完全な配置ファイルであるためです:その
@font-face文はフォント名とファイルの経路を記録して、セレクタはフォントの使用範囲を記録して、CSSセレクタはまたHTMLドキュメントに対応して、HTMLドキュメントはまたセレクタを使ってノードとテキストを探すことができます.クモの誕生
このようなアイデアを実現するには、この3つのパートナーが必要です.
オープンソースの力を借りて、ツールが迅速に実現され、以下のオープンソースプロジェクトの助けに感謝します.
document.querySelectorAll()メソッドを使用してCSSセレクタを入力してHTMLノード上のテキストHTMLファイルのパスを指定すると、圧縮とトランスコードフォントが自動化され、手動で介入する必要がなく、フロントエンドのパブリケーションシステムに簡単に統合できます.
オープンソース
絶えず改善された後、私たちはツールを--字クモ(Font-Spider)と命名し、オープンソースコミュニティにフィードバックし、中国語WebFontの発展に力を入れ、より多くの中国語サイトが美しいフォントを使用できるようにしたいと思っています.技術は遅刻するが、欠席することはない.