フォントどうもこんばんは!HYPのこうじです。皆さん使ってますか?使ってますね!そう。Mavericks』、Windowsは『8.1』から導入され、簡単にMacとWindowsの見た目事情を共通化できるというwebデザイナーの人にはたまらない一品となっています。そんな便利な游ゴシックですが、実は同じものを使っているハズなのにWindowsとMacで表示が若干違います。MacがRetinaディスプレイだからとか、Windows10のUIが使いづらいからとかそういう個人の好みの問題ではありません。デフォルトで設定されている書体の設定がOS毎に違う事が原因です。そんな游ゴシックを快適に使う為に設定をしっかり行ってから使用しましょう!この記事の内容Windowsだと文字がかすれるfont-weightを設定して解決font-weightを数値で設定する場合IEで使用するとラインがずれるボタンを作る際には注意これを回避するには?游ゴシックを使わないまとめ記事を書く際に参考にしたサイトWindowsだと文字がかすれるMacだと普通に表示されるけど、Windowsだと文字が若干かすれて見える。これは別にMacがスタバとかで意識高く出来そうとか、Windowsだとお洒落に見えないとかそういう理由ではありません。標準の表示がOS毎に違うのが原因です。さっきも言ったっけ?例えばMacの場合は『游ゴシックのミディアム』ですが、Windowsの場合は『游ゴシックの細字』がデフォルトです。Macはハッキリ見えるけど、Windowsは細字なのでかすれて見える...という事です。font-weightを設定して解決これは、スタイルシートでfont-weightに500を設定する事で解決出来ます。これを当てる事で細字から標準に変わるので、普通の文字として見えるという事です。500;}font-weightを数値で設定する場合ちなみに、font-weightとかは『bold』とか『normal』はよく使うと思いますが、数値ではあまり使う事は無いですよね。数値の場合は100~900で設定出来、下記のような割り振りとなっています。9種類も用意されているフォントなんてそうそうない気もするので、規定値以外は変わらない事も多いです。900;}IEで使用するとラインがずれるこれで解決したかと思ったら、なんとIEで游ゴシックを使うと文字下に変な余白が入り文字がズレるという現象が起こります。これは、Windows10の無償アップデートを期間終了30分前に慌てて始めたら、ダウンロード途中に無償期間が終了しましたとなって結局アップデート出来なかったからという理由ではありません。調べたのですが、結局この現象仕様っぽいです。そんなIEかわいいですよね。ちなみに、どうなるのかというか下記の画像を御覧ください。IEだけ微妙に上にずれているのが分かりますね。ズレているだけならまだいいですが、ボタンデザイン等の境界が分かるデザインを利用する場合注意が必要です。なんか中途半端にずれているボタンが完成します。これを回避するには?游ゴシックを使わない一番の回避方法はこれです。游ゴシックを使わなければなんてコトはありません。解決!...とか言ったら元も子も無いので、IEのみ『メイリオ』にしちゃう...というのが妥当です。IE10以降にのみスタイルシートを適用するハックがあるので、それを利用して行います。}}こうする事で、IE10以降のブラウザのみ設定したスタイルシートに変更出来ます。まとめ表示も柔らかくページになじみやすい上、汎用的に使える為ぜひ使っていきたい『游ゴシック』。仕様と特性を理解して使えばめちゃくちゃ使いやすいフォントなので、是非活用していきたいですね!記事を書く際に参考にしたサイトWindowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い?スタイルシートリファレンスこうじWEBクリエイター+Windowsアプリいつもする作業をもっとミス無く楽ちんに出来るような環境が提供できれば幸いです。知床八景のうち、三つを見てきました。知床五湖を散策してきました。道央編(大滝~千歳)2017.04.07もっと見る生活&ダイエット生活Instagramはじめてます。2018.10.11生活&ダイエット2018年、明けましておめでとうございます!2018.01.01生活&ダイエット2017年ありがとうございました。写真を売って、お小遣い稼ぎ!2017.05.15生活&ダイエット実家のデグーに会ってきました!その22017.05.13もっと見るその他その他メンフクロウさん、商品化!2016.08.31その他やり遂げる力、グリット!2016.07.25その他PIXTA写真、母の日に使えるものもあるよ。2016.03.29その他PIXTA写真素材UPしました。2016.03.27その他PIXTA写真素材UPしました。無料もあるよっ!2018.11.04デザイン赤ちゃん写真の販売を開始しました。コントリビューター登録をして半年くらい経過したよ。HYP一番上に戻るボタン。