CSS-WebFontテクノロジーによるオンラインフォント(@font-face文)の導入
6581 ワード
@font-face MDN資料@font-face用法の参考ブログWebFont技術の参考ブログオープンソースプロジェクトwebfontloaderオープンソースプロジェクトワードクモ(中国語フォント圧縮器)中国語フォントページ開発ガイド-チェン一峰@font-face互換性、@importまたはlinkラベルでフォントを導入する方法各种フォントフォーマット详细解科大博客提供Google Fonts加速360网站卫士常用フロントエンド公共库CDNサービス(Googleフォントを含む)
WebFontテクノロジーにより、Webページはオンラインフォント(Googleが発売した無料WebFontクラウド管理サービスなど)を使用することができ、画像を使用する必要がなく、トラフィック消費を減らすことができます.オンラインフォントは、ユーザーがターミナルデバイスにインストールする必要はありません.
Web展示専用のwoff形式フォントも各ブラウザメーカーからサポートされており、フォントの体積を減らしています.WebFontは依然として文字であり、画像を使用するよりも、選択、コピーをサポートし、Ctrl+F検索をサポートし、検索エンジンが友好的であるなど、多くの利点がある.
漢字が数万個あるため、中国語のフォントファイルは数MBのサイズがあり、実際の項目では使用できません.中国語フォントには、コンパクトフォントの作成(煩雑、修正が面倒、効率が低下し、エラーが発生しやすい)と、フォントクラウドサービス(圧縮とトランスコードフォント)の使用の2つのソリューションがあります.国内には現在2社が提供しています.http://www.youziku.com(有字庫)http://cn.justfont.com(つまり字)
ワードクモは、ページで使用されているWebFontを自動的に分析し、オンデマンドで圧縮するスマートWebFont圧縮ツールです.
CSSの@font-face文でオンラインフォントを導入し、CSSセレクタを使用してフォントを使用するテキストを指定します.
1.WebFont技術
WebFontテクノロジーにより、Webページはオンラインフォント(Googleが発売した無料WebFontクラウド管理サービスなど)を使用することができ、画像を使用する必要がなく、トラフィック消費を減らすことができます.オンラインフォントは、ユーザーがターミナルデバイスにインストールする必要はありません.
Web展示専用のwoff形式フォントも各ブラウザメーカーからサポートされており、フォントの体積を減らしています.WebFontは依然として文字であり、画像を使用するよりも、選択、コピーをサポートし、Ctrl+F検索をサポートし、検索エンジンが友好的であるなど、多くの利点がある.
中国語の問題
漢字が数万個あるため、中国語のフォントファイルは数MBのサイズがあり、実際の項目では使用できません.中国語フォントには、コンパクトフォントの作成(煩雑、修正が面倒、効率が低下し、エラーが発生しやすい)と、フォントクラウドサービス(圧縮とトランスコードフォント)の使用の2つのソリューションがあります.国内には現在2社が提供しています.http://www.youziku.com(有字庫)http://cn.justfont.com(つまり字)
字クモ
ワードクモは、ページで使用されているWebFontを自動的に分析し、オンデマンドで圧縮するスマートWebFont圧縮ツールです.
2.使い方
CSSの@font-face文でオンラインフォントを導入し、CSSセレクタを使用してフォントを使用するテキストを指定します.
/* icomoon */
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot?efsk18');
src:url('../fonts/icomoon.eot?#iefixefsk18') format('embedded-opentype'),
url('../fonts/icomoon.woff?efsk18') format('woff'),
url('../fonts/icomoon.ttf?efsk18') format('truetype'),
url('../fonts/icomoon.svg?efsk18#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-list:before {
content: "\e600";
}/* MDN */
<html>
<head>
<title>Web Font Sampletitle>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
style>
head>
<body>
This is Bitstream Vera Serif Bold.
body>
html>