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

フォント

問題発生

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

生じた疑問


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


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

　閲覧数:1,106　投稿日: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/3/28 8:47 更新
週間人気ページランキング ／ 3-21 → 3-27
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
2 RGBの種類 ／ ビットカラー | RGB(色) 7
3 ログイン 6
4 Design 0 5
4 RGB ⇔ Lab | 色変換(色) 5
5 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
5 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
5 画像縦横比の問題 | 画像 4
5 HSV ／ HSB 4
5 「bgcolor」「background-color」「background」の違い | CSS 4
6 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 3
6 「position:absolute;」指定する際は、必ず(親要素を含む)祖先要素の何れかで「position」を明示的に指定 | position(CSS) 3
6 Chromeで(TikTokなど)特定Webサイトの音を消すには、該当タブを右クリック後、「サイトをミュート」をクリックします。 | Google Chrome(ブラウザ) 3
6 Firefox(ブラウザ) カテゴリー 3
6 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
6 「.epsファイル」はあらゆるグラフィックソフトで編集できるとは限らない | Fireworks 8(Fireworks) 3
6 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う | 3系(Bootstrap) 3
6 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 3
6 「直後が A 要素 でない B 要素」を指定するCSSセレクタは、「A:not(:has(+ B)) {}」 | CSS 3
7 デザイン変更 | Webデザイン(デザイン) 2
2026/3/28 5:05 更新