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

フォント

問題発生

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

生じた疑問


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


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

　閲覧数:1,133　投稿日: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/8/14 18:04 更新
週間人気ページランキング ／ 8-7 → 8-13
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 8
2 Design 0 7
3 CSSトラブル対応(CSS) カテゴリー 3
3 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
4 「OOCSS」とは別の考え方？ | 命名規則(コーディングルール) 2
4 Material Design 2014 年 | Material Design(色) 2
4 UI カテゴリー 2
4 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる | CSS 2
4 G'MIC | GIMP 系(ソフトウェア) 2
4 img srcタグで、画像の上に文字 | 色 2
4 ソフトウェア カテゴリー 2
4 HTMLエディタ カテゴリー 2
4 三大「高クオリティ」「モックアップベクター素材」配布サイト 2
4 Chromeブックマーク(ブラウザ) カテゴリー 2
4 二次色(Secondary Color)とは？ ／ アプリ内での色の使用 2
4 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 | Google Chrome(ブラウザ) 2
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1
5 モバイルデザイン7 ／ スマホ pc 広告 切り替え　bootstrap | モバイルデザイン(デザイン) 1
5 Flexible box の縦方向中央揃えは、「vertical-align: middle;」ではなく「align-items: center;」 1
5 Krita | ソフトウェア 1
2026/8/14 5:05 更新