日本語訳

CSS - ウェブフォント：入門ガイド

こんにちは、未来のウェブデザイナーさんたち！私はあなたたちがCSSウェブフォントの世界に踏み込むこのエキサイティングな旅のガイドを務めることができてとても嬉しいです。コンピュータサイエンスを多年間教えてきた者として言えることは、フォントを理解することは新しい言語を学ぶのと同じです。初めは難しいように思えるかもしれませんが、一旦慣れると、あなたのウェブページがどれほど変貌するか驚くことでしょう！

CSS - Web safe fonts

ウェブフォントとは？

本題に入る前に、基本から始めましょう。ウェブフォントは、ユーザーのコンピュータにインストールされているかどうかにかかわらず、あなたのウェブサイトで使用できるカスタムフォントです。ウェブサイトに独自の声を与えるようなものです！

ウェブフォントの重要性

世界のすべての本が同じフォントを使用していたらどうでしょうか？退屈ですよね。ウェブフォントは、あなたのウェブサイトの個性を表現し、読みやすさを向上させます。ウェブサイトを他と差別化するための秘伝のソースです！

CSSウェブフォント - フォントフォーマットの種類

さて、さまざまなフォントフォーマットについて話しましょう。アイスクリームの味を選ぶのと同じで、それぞれに特徴があります！

フォーマット	説明	ブラウザサポート
TTF/OTF	TrueType Font / OpenType Font	すべての現代ブラウザ
WOFF	Web Open Font Format	すべての現代ブラウザ
WOFF2	Web Open Font Format 2	大部分の現代ブラウザ
EOT	Embedded OpenType	Internet Explorer
SVG	Scalable Vector Graphics	古いiOSバージョン

これがアルファベットのスープのように見えるかもしれませんが、進めると理解が深まります！

CSSウェブフォント - 主要ポイント

コードを書く前に、いくつかの主要ポイントを押さえましょう：

ウェブフォントを使用すると、ウェブサイトでカスタムフォントを使用できます。
フォントはサーバーからロードされ、ユーザーのコンピュータからではありません。
Google Fontsなどのサービスを使用するか、フォントを自分でホスティングできます。
ブラウザの互換性のために、さまざまなフォントフォーマットがあります。
@font-faceルールを使用してCSSにカスタムフォントを定義します。

CSSウェブフォント - @font-faceアトリビュート

さて、コードに進みましょう！@font-faceルールは、ウェブページに新しいフォントを導入することに似ています。こんな感じです：

@font-face {
font-family: 'MyAwesomeFont';
src: url('path/to/my-awesome-font.woff2') format('woff2'),
url('path/to/my-awesome-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}

これを分解すると：

font-family: フォントに名前を付けるものです。後で要素にフォントを適用する際にこの名前を使用します。
src: フォントファイルの場所とフォーマットを指定します。
font-weightとfont-style: フォントの特性を定義します。

フォントを定義した後、こんな風に使用できます：

body {
font-family: 'MyAwesomeFont', sans-serif;
}

これはブラウザに、「MyAwesomeFontを使用して、それが見つからない場合はsans-serifフォントを使用して」と言っています。

CSSウェブフォント - @font-face / font-stretch

font-stretchプロパティは、フォントのヨガクラスのようなものです。フォントを伸ばしたり圧縮したりできます。こんな風に使用します：

@font-face {
font-family: 'StretchyFont';
src: url('path/to/stretchy-font.woff2') format('woff2');
font-stretch: ultra-expanded;
}

.stretched-text {
font-family: 'StretchyFont';
font-stretch: 150%;
}

これにより、テキストがジムで鍛えられたように少し太くなります！

CSSウェブフォント - オンラインフォントサービス

オンラインフォントサービスを使用するのは、宅配便を注文するのと同じで、便利で種類が豊富です。Google Fontsは一般的な選択肢です。こんな風に使用します：

Google Fontsにアクセスし、好きなフォントを選びます。
提供されたリンクタグをコピーし、HTMLの<head>に貼り付けます：

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

CSSでフォントを使用します：

body {
font-family: 'Roboto', sans-serif;
}

それで、Google Fontsのカスタムフォントを使用しています！

CSSウェブフォント - フォントのインポート

ウェブフォントを含む別の方法は、@importルールを使用することです。フォントをCSSパーティに招待するようなものです。こんな風にします：

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
font-family: 'Roboto', sans-serif;
}

この方法により、すべてのフォント宣言をCSSファイルにまとめることができ、いくつかの開発者が組織化を好む理由です。

結論

おめでとうございます！あなたは刚刚CSSウェブフォントの素晴らしい世界の第一歩を踏み出しました。新しいスキルを学ぶのと同じで、練習は完璧に近づけます。さまざまなフォントを試してみて、ウェブページの外観と感触がどのように変わるかを確認してください。

この章を終えるにあたり、私の教え子の話を少しお話しします：私の授業でウェブデザインに苦戦していた生徒がいました。彼女はなぜかサイトが平凡なのか理解できませんでした。しかし、ウェブフォントを学んだ後、まるで光がついたように、突然彼女のサイトが平凡から美しく変わりました。それがウェブフォントの力です！

それでは、フォントを遊び、ウェブページが生きるのを見守りましょう。ハッピーコーディングを、そしてウェブデザインの世界では、唯一の限界はあなたの想象力だけです！

Credits: Image by storyset