JPか?2018.12.122019.09.21Webスキルよこのじ(@yokonoji_work)です。JPを使うことが多いのですが、日本語が含まれるフォントは読み込みに時間がかかる点が少し気になっていました。Gothic)の使用を検討しましたので、違いや注意点をまとめておきます。Gothic)は検討するに値する素晴らしいフォントだと思いますので、ぜひ読んでみてください。10.9から標準搭載されているフォントです。cssでfont-familyとして指定する場合は次のように記述します。sans-serif;似たような記述があるのはOSにより対応するフォント名が異なるためです。YuGothicフォント名にスペースが含まれる場合と日本語名の場合には、シングルクォーテーション(’)かダブルクォーテーション(”)で囲む必要があります。クォーテーションなしでも問題ない?のかもしれませんが、クォーテーションがあることで悪さをすることはないようですので、とりあえず付けておけば大丈夫でしょう。font-familyプロパティにクォーテーションは必要?最後尾のsans-serifはゴシック体のいずれかのフォントを当てるように指示するものです。游ゴシックが入っていない場合はこれが適用されますので、必ずsans-serifの記述入れておきましょう。游ゴシックを使用するとき、WindowsとMacで見た目が違うことがよく問題として挙げられます。Webフォントを利用せずにOSによる見た目の違いをなくすことを期待しているはずなので、当然ですね。こちらは、Windowsで游ゴシックを表示させたものです。Explorerです。ブラウザによっても少し違いがあるようです。Macは持っていないのですが、Macの游ゴシックはこのように表示されるようです。指定する時の注意WindowsとMacを比べると、Macの方が美しく表示されているように見えます。この違いは、OSに用意されているフォントの太さの違いによります。Windows:Light、Regular、Medium、BoldMac:Medium、Bold具体的には、font-weightの指定がない場合にWindowsではRegularが使用されて、MacではMediumが使用されるようです。このため、Windowsの方が細く表示されています。よって、WindowsもMediumで表示させるために、cssのfont-weightで500を設定してあげる必要があります。Chromeで表示させたものです。500だと視認性が良い太さだと感じますね。これでWindowsでもMacでも同じように表示されることとなります。JP」を使用したいなと思いました。游ゴシックを使えば、確かにWindowsとMacで見た目を揃えることができます。10.9以降という条件があります。その他のバージョンではどうするか?スマートフォンやタブレットではどのように表示されるか?ということも考えなくてはいけません。これは細かく調整していくと、かなり労力がかかることです。fontsを利用すれば、細かな調整なしにあらゆるデバイスで同じように表示できます。fontsを積極的に使おうという結論に達しました。2015年版Font-familyメーカー2017年版個人的ベスト|CSSフォント指定WIN、MACでキレイに表示(ゴシック、明朝)もう迷わない、「@font-familyはこれでOK!」を色々考えてみた。開発を速くするCSSフレームワーク一覧よこのじ(@yokonoji_work)です。ドットインストールやPaizaといった動画学習では、Bootstrapの講座が用意されていますので、B[...]GoogleドキュメントからWordPressに直接投稿する方法よこのじ(@yokonoji_work)です。ブログ記事の作成をクラウドソーシングで依頼することは一般的に行われています。その外注記事をWordPr[...]pictureタグとsrcset属性で画像の種類やサイズをスマホとパソコン表示で変える方法よこのじ(@yokonoji_work)です。スマホとパソコンで読み込む画像を変えることは、通信回線の弱いモバイルで表示速度を保ったり、デザインの自[...]CSSでdivやテキストを上下左右(縦・横方向)に中央寄せする方法よこのじ(@yokonoji_work)です。CSSでdivタグや文字を真ん中に表示させたいと思っても、なかなかうまくいかないこともあります(水平方[...]【設定方法あり】gzip圧縮でページの読み込みが速くなる仕組みよこのじ(@yokonoji_work)です。cssやjsファイルのデータサイズを小さくしてページの表示速度を向上させる方法にminify(ミニファ[...]よこのじ都内徒歩通勤のピアノ業界で働くエンジニア。技術系の内容を書いてます。https://yokonoji.work/feed/rss2/▼ココナラでWordPressの表示高速化をお手伝いしてます。Scriptでメールを送信する方法【メルマガ機能に応用可】キレイで読みやすいRubyコードを書くために。