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

フォント

問題発生

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

生じた疑問


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


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

　閲覧数:1,033　投稿日: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
2025/12/07 21:28 更新
週間人気ページランキング ／ 11-30 → 12-6
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 23
2 RGB ⇔ Lab | 色変換(色) 11
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 6
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 6
4 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 5
4 鉄道会社毎のカラーコード | カラーコード(色) 5
5 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 4
5 色モデルイメージ図 | 色変換(色) 4
6 「bgcolor」「background-color」「background」の違い | CSS 3
6 「position:sticky;」がどうしても効かない →
を一旦削除してみる →
に「display:inline;」を指定 | CSSトラブル対応(CSS)
3
6 デザイン変更 | Webデザイン(デザイン) 3
6 自由変形ツール | Illustrator CS3(Illustrator) 3
6 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 3
6 似顔絵ジェネレーター : 似顔絵メーカー ／ NIGAOE MAKER 3
6 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 3
6 キャラクター無料作成ジェネレーター ／ FLASH以外 ／ オンラインサービス | イラスト参考(デザイン) 3
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 3
7 SCSSは良いことばかりではないかも | SCSS(CSS拡張メタ言語) 2
7 拡張機能が Chrome によって無効にされました ／ この拡張機能は破損している可能性があります。 | Chrome 拡張機能 2
2025/12/7 1:01 更新