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

フォント

問題発生

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

生じた疑問


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


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

　閲覧数:942　投稿日: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/2/05 15:52 更新
週間人気ページランキング ／ 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 22
2 16進数カラーコード ／ 2進数 11
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 9
4 鉄道会社毎のカラーコード | カラーコード(色) 7
5 キャラクター無料着せ替えジェネレーター Dress up game ／ オンラインサービス | イラスト参考(デザイン) 6
6 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 5
7 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
7 似顔絵ジェネレーター : 似顔絵メーカー ／ NIGAOE MAKER 4
7 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 3
8 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
8 拡張機能が Chrome によって無効にされました ／ この拡張機能は破損している可能性があります。 | Chrome 拡張機能 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games ／ オンラインサービス | イラスト素材(デザイン) 2
9 Design 0 2
9 RGBの種類 ／ ビットカラー | RGB(色) 2
9 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
9 色空間 ／ 表色系 ／ 顕色系 ／ 混色系 2
9 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
2025/2/5 1:02 更新