こんにちは、「ふ」です。
CSSでfont-familiyを設定するとき、以下のように記述すると思います。
CSS
①②端末にインストールされているフォントに該当するものがあれば、上に記述されたものから優先的に適用されます。
③候補にあがったフォントが存在しない場合、端末にあるものの中からカテゴリ(serif,sans-selifなど)のみ一致したフォントが使用されることになります。
つまり、③の状態となった場合には表現したいイメージとはほど遠いものになってもおかしくありません💧 哀しい・・・
Google Fontsという、無料のツールがあります。
これは外部からフォントデータを読み込んでブラウザに表示させる仕組みとなっているため、各デバイスにインストールされているフォントに依存しません。どんなデバイスやブラウザでも同じフォントで表示してくれる、優れものです。
今回はこのGoogle Fontsを使ってみたいと思います。
早速トップページにアクセスしました。
多種多様なフォントがありますが、□の部分からフォントの「カテゴリ」「言語」「用意されているプロパティの数」の条件で絞り込むことができます。
ちょっと観ていきましょう ♪
カテゴリ:Selif、 言語:Japanese
この明朝体、とても綺麗 ✨
尖りすぎていないので見た目に優しい。
実際にカーソルを当てて、文字を入力することができます。
カテゴリ:ALL、 言語:Chinese(簡略)
中国語フォントで書くと「山田太郎」もこんなにかっこよくなりました。
ちなみに、中国語フォントにかな入力で「やまだたろう」と打っても表示されません。一旦、外部のテキストエディタなどで「山田太郎」と変換してからそれをコピー。そしてGoogle Fontsの画面にぺー
今回はwebページ上でのサンプルコード表示用に、等幅フォントを探してみたいと思います。
「Categories」の「Monospace」だけにチェックを入れて、言語は「All langage」として条件を絞り込みます。
これなんか良さそうだ。コードを適当に書いてみます。
ダメです。「==」を入力したら、完全に繋がってしまいました。
また別のフォント。これは丸括弧が各括弧っぽくなってしまうのでボツ。
〜このようにテキストを試し打ちしながらフォントを選定していくことができるので、とても便利です。
検討した結果、CousineののBold 700を採用しました。
webページに取り入れてみましょう。
「外部データの読み込み」となると、難解 💧 なイメージを抱かれるかもしれませんが・・
右上の「+」をクリックします。
画面下に黒く「Familiy Selected」というのが出てくるのでこれをクリック。
「1」をHTMLファイルの<head>部分に貼ればロード時に読み込んでくれます。
そのフォントで表示したいセレクタのCSSに、「2」を貼り付けます。
〽️それだけでOK ok OK ok・・・
実例を示してみますね。
HTML
function sample() { console.log("hello"); }
ブラウザ
はい、ホントにcopy&pasteだけで実装完了。
今回使ってみたGoogle Fonts、おそろしく簡単にwebページに取り入れることができました。GoogleさんのオンラインサービスはいつもながらUIや操作性に優れていますね。
ただしファイルサイズの大きい日本語フォントを大量に取り入れると、ページ自体の読み込みが遅くなってしまうかもしれません。
その点だけ配慮して、素敵なページ作りに是非利用してください 🎵
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。
🐧 twitter 🐧