オシャレな人たちは、もう「メイリオ」を使っていなくて
「游ゴシック」っての使い始めてんのね。
游ゴシックは、ちょっとお洒落で読みやすく、
なおかつWindowsでもMacでもＯＫという
今後主流になるかも知れないフォントですね。
個人的には、ちょっと可愛げのあるメイリオ、好きなんだけどなぁ～～・・・
以前、こんな記事を書きました。（かなりいい加減な記事で申し訳ない）
初心者必読 アメブロカスタマイズ初級編
まずは文字（フォント）を読みやすい「メイリオ」に変更！
でも、近い将来、サイトを訪れた人たちが
「うわっ！このサイト、まだメイリオのままなんだ。
なんか、懐かしい感じがするなぁ～～。
（更新止まったままなのか？）」
って思うような、そんな時代が来るのかも知れません。
ということで、今回このブログでは早々と
「游ゴシック」を導入するカスタマイズに挑戦してみたいと思います。
CSSの一番下にコピペして付け足すだけでいいので、
設定自体は簡単なんですけど、
どのような優先順位で表示するか？ってのを決めるのが大変。
素人なので、もう大変でございます。
いろんなサイトを参考にしながら右往左往しております。
好みの問題もありますので絶対的な正解ってのは無いんですが
それでも傾向は見えてきますね。
順不同です。
記事が公開された日付の順に載せています。
body{
font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
とりあえず、これを基本としていいんじゃないでしょうかね。
で、少し自分なりの個性を出したい場合は
好みの英字フォントを一番先頭に追加する、という感じで。
これをそっくりコピペして
ブログデザインのＣＳＳ編集｜Ameba (アメーバ)のページで
cssの一番下に貼り付けるだけ。
（カスタマイズしたい人はテンプレート選びの時に
CSS編集用のデザインを選んでおきましょう）
いや～～・・・結論までにスゲ～～時間かかった(笑)
「游ゴシック」っての使い始めてんのね。
游ゴシックは、ちょっとお洒落で読みやすく、
なおかつWindowsでもMacでもＯＫという
今後主流になるかも知れないフォントですね。
個人的には、ちょっと可愛げのあるメイリオ、好きなんだけどなぁ～～・・・
以前、こんな記事を書きました。（かなりいい加減な記事で申し訳ない）
初心者必読 アメブロカスタマイズ初級編
まずは文字（フォント）を読みやすい「メイリオ」に変更！
でも、近い将来、サイトを訪れた人たちが
「うわっ！このサイト、まだメイリオのままなんだ。
なんか、懐かしい感じがするなぁ～～。
（更新止まったままなのか？）」
って思うような、そんな時代が来るのかも知れません。
ということで、今回このブログでは早々と
「游ゴシック」を導入するカスタマイズに挑戦してみたいと思います。
CSSの一番下にコピペして付け足すだけでいいので、
設定自体は簡単なんですけど、
どのような優先順位で表示するか？ってのを決めるのが大変。
素人なので、もう大変でございます。
いろんなサイトを参考にしながら右往左往しております。
いろんなサイトが推奨している「おすすめfont-family表記」を比較してみる
好みの問題もありますので絶対的な正解ってのは無いんですが
それでも傾向は見えてきますね。
順不同です。
記事が公開された日付の順に載せています。
2015年のfont-familyはこれで決まり！～フォントでサイトを彩る～ | 株式会社ドレスクリエイト | 京都発のベンチャー企業
2015年1月6日
font-family: Quicksand, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
今僕がはまっているfont-familyがあります。
それが游書体を用いたfont-familyです。
見た目がきれいで、boldにしてもお洒落です。
2015年流行るのではないかと思います。
ただWindows7に対応していないので、メイリオも入れておいた方がいいです。
ついでに数字がお洒落になるQuicksandも入れておきました
2015年新春のブログのフォント指定 "font-family" はWindowsもMacもこれで決まり！ | 家電のいろは
2015年1月7日
font-family: YuGothic , ‘游ゴシック’ , ‘Hiragino Kaku Gothic ProN’ , ‘ヒラギノ角ゴ ProN’ , Meiryo , メイリオ , sans-serif ;
「font-family: YuGothic , ‘游ゴシック’ , ‘Hiragino Kaku Gothic ProN’ , ‘ヒラギノ角ゴ ProN’ , sans-serif ;」こうしておけば、OS X古いバージョン使ってる方とWindows 8以下にヒラギノ入れてる人の環境に合わせられます。ちなみに「Hiragino Kaku Gothic Pro」ではなく「Hiragino Kaku Gothic ProN」ですiOSはProNしか入っていないので間違えると…間違えてもヒラギノで開きそうですけどね。
一部のブラウザの為にW3と書いていた時期がありますが、最新版には必要ないので削って平気です。
CSSフォント指定を考える2015 | Re Simple inc.
2015年2月23日
font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3″, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
今や、PCよりも重要なスマートフォンユーザー。
レスポンシブのページを制作するのであれば、フォントの指定をスマートフォンにも対応させる必要があります。
iOSで使用されているのはヒラギノ書体。Windowsでは使用はしませんでしたが、日本でのシェアを考えるとiOSは視野に入れないといけないデバイスと言えます。iOSでは「ヒラギノ角 Pro」ではなく、「ヒラギノ角 ProN」を指定していることが必要になり、また、アルファベットで”Hiragino Kaku Gothic ProN”と、ウエイトなしで記述している必要があります。
スマートフォンという意味では、Androidも考慮が必要です。
Androidは「Droid Sans」がデフォルトの標準フォントとなっています。これには日本語フォントとしての、「Droid Sans Japanese」も含まれます。最近のものでは、Android 4.0 になって「Roboto」がシステムフォントとして採用されました。日本語フォントは、「モトヤフォント」です。
ですので、Androidへの対応として、RobotoとDroid Sansも合わせて記述することとします。
毎回悩むfont-familyの指定、うちのブログはこれで統一しました - アイデアハッカー
2015年2月28日
font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
実際に色々試してみたんですが、これが一番無難、というか綺麗に表示出来ている気がしました。
英字はVerdanaで
WinとMacの共通で使える英字フォントはいくつかありますが、Verdanaが一番綺麗で識別しやすいです。
游ゴシックってなんだ？って感じだったんですが、Win8.1とOSX10.9以上で共通で使える日本語フォントみたいですね。知らなかった。
ナウでヤングなCSSのfont-familyはコレだ！ 2015年版 | ほりべあぶろぐ
2015年4月21日
font-family: "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
游ゴシック（と游明朝）は、Windows8.1およびOS X Mavericksから追加された、字游工房のフォントです。
Windows 8.1では3ウェイト（ライト・ミディアム・ボールド）が、OS Xには2ウェイト（ミディアム・ボールド）が収録されています。Windowsにおいて、ブラウザによってはかなり細字になってしまうのが玉に瑕ですが、何にせよクールなのでWindowsではコレを指定します。僕の場合、OS Xではこれまで通りヒラギノ角ゴを指定しています。
もしOS Xでも游ゴシックを用いたい場合、WindowsとOS Xではフォント名が異なるので注意が必要です。
Windowsの場合: “Yu Gothic”もしくは”游ゴシック”
OS Xの場合: “YuGothic”もしくは”游ゴシック体”
Font－familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
2015年6月1日
body{
font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
Mac10.8から搭載した洗練されたサンセリフ英字フォント「Avenir」を先頭に。
その後Googleフォント記載を追加。この辺りは好みによってきますがオーソドックスなサンセリフ体として「Open Sans」を選んでみました。
その後保険として「Helvetica Neue」「Helvetica」「Arial」「Verdana」と英語フォントを追記。
Android用フォント「Roboto」を挟んで、游ゴシックの記述を列記。
游ゴシックの記述はWindowsとMacで微妙に正規表示が違うので合計４種記述。
そのあとはMac10.8以前用に「ヒラギノ角ゴ Pro W3」、Windows7用に「Meiryo UI」、Vista用に「メイリオ」、それ以前のWindowsの受け皿として「ＭＳ Ｐゴシック」を足して完成です。
もう迷わない、「@font-familyはこれでOK！」を色々考えてみた。 | unitopi - ユニトピ -
2015/6/25
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。
しかし、Macの場合はヒラギノを優先させたいですよね。。
Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。
つまり、“メイリオ”は読み込まれず、“Meiryo”とする必要があるということです。
Windowsはヒラギノが入っていないのでメイリオが選択され、
Macではヒラギノが優先される。
もろもろ参考にして出した結論。自分なりのベスト「font-family表記」はこれだ！
body{
font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
とりあえず、これを基本としていいんじゃないでしょうかね。
で、少し自分なりの個性を出したい場合は
好みの英字フォントを一番先頭に追加する、という感じで。
これをそっくりコピペして
ブログデザインのＣＳＳ編集｜Ameba (アメーバ)のページで
cssの一番下に貼り付けるだけ。
（カスタマイズしたい人はテンプレート選びの時に
CSS編集用のデザインを選んでおきましょう）
いや～～・・・結論までにスゲ～～時間かかった(笑)