Edge Web Fontsを使用する

このビデオでは、Webフォントに関する リモートホスト型ソリューションについて説明します 具体的には、Dreamweaver CCと統合されている Adobe Edge Fontsを使います このプロセスは非常に簡単です セレクターが強調表示されていることを確認しましょう そのために、この「@Media」セクションを折りたたんで .textSizePxを選択します そして、「プロパティ」カテゴリの 「テキスト」セクションを見ると 「Gill Sans」が適用されていることを確認できます これをクリックして 下の方にある「フォントを管理」を選択します 「フォントを管理」ダイアログボックスが開き 使用可能なすべてのEdge Web Fontsが表示されます これらは無料で利用できます すべてGoogleやAdobe、その他のデザイナーが収集したものです 無料のサービスであり どのフォントでも自由に使用できます 特定のフォントを見つけるには 名前を入力してフィルタします 見出しに推奨されるフォントや 本文に推奨されるフォントのみを 表示することもできます もちろん、両方のフィルタを 選択解除することもできます また、サンフォントのソースや セリフフォントなどのスタイルでフィルタすることもできます スラブフォントもあります 装飾的なフォントが良ければ、下の方に 装飾的なフォントがあります これを選択すると リストをさらにフィルタできます これで、使いたいフォントが見つかります 今回はここから いかにも装飾的なフォントを 選択してみます このフォントを使います 選択すると、小さいチェックマークが表示されます 下の記述にあるとおり「完了」をクリックすると Edge Web Fontsサービスに同意したことになります 詳細を確認する場合は 「Term of Use」をクリックしてください 「完了」をクリックしても 実際には何も起こりませんが font familyプロパティ内でこのフォントが選択できるようになります 下の方にはカスタムのEdged Web Fontがあります 先頭に小さなアイコンがあり リストがセクションで区切られていることで 自分でホストしたWebフォントと Adobe Edge Webフォントを使った リモートホスト型Webフォントとの違いを 簡単に区別できます 上のほうには、デスクトップフォントがあります これを選択してみましょう 選択すると このタイプにあらかじめフォントウェイトまたは フォントサイズのプロパティが適用されている場合は プロパティが変更される可能性があることを示す 警告が表示されます レンダリングされたものを表示するには 「ライブ」ビューに移動します 「ライブ」ビューに カスタマイズした書体が表示されます 背景で何が実行されているのでしょうか 前回のムービーで扱った @font-face宣言とは異なります ソースコードを見ると JavaScriptがあります このJavaScriptは、単にAdobeのサーバー上の JavaScriptファイルを指しています ご覧のとおり これらのリモートホスト型Webフォントの実装はかなり簡単です 必要に応じて、フォントスタックを作成して 何らかの理由で 正しく読み込まれなかった場合などに備えた として利用することもできます ご覧のとおり、Dreamweaver CCで Edge Web Fontsを使用するのは非常に簡単です 先ほど述べたように、これは Webデザインの世界ではかなりエキサイティングな技術です カスタムの書体を使用することは ほんの数年前までは不可能でした 使いたいカスタム書体用の画像を 作成する必要がありましたが 今やその必要はありません 画像ではなくテキストを使用すれば 検索エンジンによる、Webサイトの 重要度の評価は落ちません そのオプションをDereamweaver CCが 提供するのです