Web カスタム クール font_html/css_WEB-ITnose

コンピューターにはすでにフォントがインストールされていますが、特別なニーズがあり、他のフォントを選択したい場合は、次の手順が必要です

1. 適切なフォントを見つけます

フォントのダウンロードを提供する Web サイトがいくつかあります。

www.theleagueofmoveabletype.com

www.exljbris.com

www.fontex.org

http://openfontlibrary.org

www.fontsquirrel.com

www.google.com/webfonts

2. フォント多くの形式があり、ブラウザごとにサポート方法が異なります

.eot このフォントは IE ブラウザにのみ適しています。.woff フォントしか持っていない場合、IE でもフォントを表示できるようにするには、Web サイトからフォントを変更できます。

www.fontsquirrel.com /fontface/generator は、さまざまなサフィックスを持つフォントを生成します。

.ttf (True Type および open Type) このフォントは、幅広いデバイスをサポートしています: IE 9 以降、Firefox、Chrome、Safari、Opera、

iOS Safari (バージョン 4.2 以降)、Android、および Blackberry ブラウザ

.woff は、Web 用にカスタマイズされた新しいフォント形式です。これは通常、.ttf 形式の圧縮バージョンであるため、サイズが小さく、ダウンロードが高速になります: IE 9 以降、Firefox、Chrome、Safari。 、Opera、

Blackberry ブラウザ、iOS Safari バージョン 5 以降、ただし Android はこのフォントをサポートしていません。

.svg Internet Explorer も Firefox もこのフォントをサポートしていません。サイズは他のフォントの 2 倍です。唯一の利点は、古いバージョンの Safari 4.1 と私の以前のバージョンをサポートしていることです。

3. フォント変更を初期化します

.eot、.ttf、.woff、および .svg フォントを同じディレクトリ (webfonts ディレクトリなど) に配置します。たとえば、このサイト https:/ からフォントをダウンロードしました。 /www.theleagueofmoveabletype.com/linden-hill

スタイルのフォント変更を宣言します:

@font-face {

font-family: 'LindenHill'

src: url('webfonts/LindenHill-Italic-webfont.eot ') ;

src: url('webfonts/LindenHill-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('webfonts/LindenHill-Italic-webfont.woff') format(' woff') ,
url('webfonts/LindenHill-Italic-webfont.ttf') format('truetype'),
url('webfonts/LindenHill-Italic-webfont.svg') format('svg');

write 複数のブラウザをサポートする非常に多くのフォント形式の目的はご存知でしょう。

4. このフォントを使用します

.main p {

color: #616161;

font-family: LindenHill、Baskerville、serif;

font-size: 1.1em;

line-height: 15 0%;
margin-下: 10px;
左マージン: 80px;

スクリーンショットは次のとおりです: