font-familyには游ゴシックを指定しない

フォント

問題発生

　状態:- 　閲覧数:2,053 　投稿日:2016-07-22 　更新日:2016-07-22
Windows10へアップグレードしたら、フォントが見づらくなる
・耐えられない

生じた疑問


どうしてみんな「游ゴシック」を絶賛しているの？
・自分の頭がおかしくなったのかと思ったよ
見比べてみたら游ゴシックが思った以上にキレイ！ 個人的にはヒラギノよりもやわらかい感じで游ゴシックの方が好き。 これからは、font-familyには是非とも游ゴシックを指定したい
WinでもMacでも標準搭載、font-familyには見やすく美しい「游ゴシック」を指定！
クライアント様の環境によってヒラギノ角ゴかメイリオのどちらかを指定してきましたが、今後は遊ゴシックに統一


Windows10では文字がかすれたように見えて非常に読みづらくなる

　閲覧数:1,043　投稿日:2016-07-22　更新日:2016-07-22

原因判明


Twitter検索した結果、ようやく原因が判明
font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまう
“font-weight: 500;” という指定が肝で、この数値を指定してやると、Macでは「ミディアム」、Windows10では「中（ミディアム）」が使用されます

・Windows10にアップグレードして見づらいフォントの解決法

実際に試してみたが


font-familyで「游ゴシック」「font-weight: 500」
・見違えるように綺麗になった

結論


font-familyで「游ゴシック」指定する場合はfont-weight指定が必須
・指定しないと、文字がかすれたように見えて非常に読みづらくなる

font-familyで、「font-weight指定した游ゴシック」と「メイリオ」は、好みの問題
・個人的には「メイリオ」の方が好き

游ゴシックが推奨されている理由は？
・「Windows」「Mac」環境に左右されにくいから？

フォントアイコン表示不具合の原因は重複読込＋α

font-size



類似度ページランキング
順位 ページタイトル抜粋 ％
1 font-familyには游ゴシックを指定しない 96
2 font-family設定 59
3 resizeが効かない場合は、min-heightを設定してみる 39
4 「z-index」が効かない時は「-1」を指定してみる 39
5 positionプロパティのrelative指定は、デフォルトではない 37
6 divタグがdisplay:block;とかしても、ブロック要素にならないときは、 37
7 font-size 36
8 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 35
9 サムネイル画像にpadding指定してはいけない。特に文字列を埋め込んだ画像では 34
10 HTML5でiframeスクロールバーを表示しない方法が不明 33
11 navタグで定義している部分だけCSSが効かない【html5】 33
12 一つの要素に対して「id 属性値」を複数指定することは出来ない 33
13 Chrome でキャッシュを効かさない 33
14 「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない 32
15 「:first-child」が効かない場合は「:first-of-type」 32
16 HTML5では、inputタグの閉じタグを付与しない 32
17 HTMLで「1つのタグにidを複数指定」は出来ない！ 32
18 SVG線を徐々に描画していくためには、@keyframes を利用 32
19 transformプロパティ 32
20 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 31
2026/1/12 7:38 更新
週間人気ページランキング ／ 12-30 → 1-5
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 27
2 Design 0 6
3 Chromeをインストール出来ない | Google Chrome(ブラウザ) 4
3 RGBの種類 ／ ビットカラー | RGB(色) 4
4 デザイン変更 | Webデザイン(デザイン) 3
4 キャラクター無料着せ替えジェネレーター Dress up game ／ オンラインサービス | イラスト参考(デザイン) 3
4 パッケージ化されてない拡張機能 | Chrome 拡張機能 3
5 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
5 Bookmarks clean up | Chrome 拡張機能 2
5 似顔絵ジェネレーター : 似顔絵メーカー ／ NIGAOE MAKER 2
5 StableDiffusionのweb版「DreamStudio」を使用してみた感想。それなりに楽しめましたが、課金してまで使用してみたいとは思いませんでした。 | AI画像生成 2
5 16進数カラーコード ／ 2進数 2
5 HSLとHSVの違い | 色変換(色) 2
5 RGB ⇔ Lab | 色変換(色) 2
5 カラーコード ／ 色コード | カラーコード(色) 2
5 いい感じのGIFアニメーションを探してみる … 国内 2
5 ユーザー個別の設定情報が格納されているレジストリキーを削除 2
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
5 色モデルイメージ図 | 色変換(色) 2
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
2026/1/6 1:02 更新