新着記事プロフィールmenuなんと言おうとスマートなCSSのfont-familyはこれ2016.8.5CSSCSSのfont-familyは細かいことを覚えずにこれで。以前にも似たような記事を書きましたが、今回は「2016年〜版」ということで、最近僕がコーディングをするときは、だいたいこれ!というフォントファミリー指定をメモします。500;}はい、好みやカンプの都合もありますが、特に問題がなければ上記で良いでしょう。Webデザイナーは、游ゴシックには注意。游ゴシックといえば、windowsなら8から収録されているフォントで、Macにも収録されているため、フォントのレンダリングでいえば共通の見た目が実現できる、というものでした。いろんな記事で話題になっていた、「windows8での游ゴシックがかすれて見えねー!」問題について。Chromeのレンダリングの仕様が関係しているとのことです。Boldが収録されています。その「Regular」が、解像度の都合でかすれてしまうのですね。Macは?というところですが、MacにはMediumとBoldが標準で収録されています。そりゃもちろんRegularよりもMediumのほうが視認性が高いよね...ということになります。500;を指定するわけです。Chromeのみこの方法が効かないのです。Chromeのみ」と書きましたが実はCSSの指定に対するレンダリング的にはこちらが正しく、Macでのレンダリングが特殊らしいです。ちなみにwindows10ではこのような差異はないので、対処としては、「windows10へアップグレードしてくれ」というところです。Web源真ゴシックをWebフォントとして使ってはいかがだろうか僕の場合ですが、手が空いたり気が向いたら「源真ゴシック」を使用します。Sans自体が非常に多くの文字をサポートしていて、かつスマートな見た目なのです。Light〜Heavyまで7つのウェイトを収録しており、winとmacの游ゴシック問題のような面倒なことが起こりません。(Lightを使用すると、解像度によりますがwindowsでかすれます。MacのRetinaでは美しくシャープなのですが...これは標準で収録されていないのでWebフォントとして読み込む必要がありますが商用利用可のライセンスであるため問題なく使用できます。ちなみに当ブログのフォントは源真ゴシックLightを使用しています(2016年8月現在のデザイン。見出しやリード文にも柔軟に対応できるので、デザインの段階から使えますね!フォントのダウンロードは以下から。Woffコンバータを使用してWebフォント化したファイルをサンプルで載せておきますので、参考にダウンロードしてみてください!ちなみにフォントによるトラブルにおいては一切責任を負いませんので、ご了承ください。Webフォント化サンプルファイルメイリオなんかよりも100倍おすすめです!(個人的に意外と知らない方も多いので、事前に共有はしっかりしましょうね。源真が小塚とかヒラギノに変えられたら、たまったもんじゃないですから。音楽Profile東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。