Sans」を使ってみた。Sans」を使ってみた。Sans」を使ってみた。Sans」がなんだか良さそう。Sans」とは、AdobeとGoogleが共同開発したオープンソースのフォントのことです。日本語名は「源ノ角ゴシック」と言います。Sans」、Adobe側は「源ノ角ゴシック」で提供しています。)一番の特徴は、やはりウェイトが7種類もあるところ。あとはなんといっても、すごく綺麗なフォントです。ダウンロードはこちらから。Sans」をWebフォントとして使ってみる。フォントをサブセット化する日本語のウェブフォントは、とにかく重い。英語のフォントと違い、ファイルサイズが格段に重い。文章が表示されるまでのスピードが目に見えて遅いということです。Sans」を使ってみると、一瞬ページが真っ白になる程・・これはいかん。思いフォントの軽量化を試みました。参考にさせていただいたのはこちら。JPを指定する時に気を付けたことこちらと全く同じ手順で軽量化できました!(サブセット化というらしい。勉強になった)複数のフォント形式を用意するcssは以下のように設定しました。あるのがわかると思います。多くの環境にWebフォントを対応させるために3種類のファイル形式を用意しました。変換したバージョンも用意します。こちらも先ほどの記事に書いてあります。JPを指定する時に気を付けたことところでこれらは何の違いがあるのか?と気になる人もいるかと思います。対策用.woff:ウェブフォント専用形式のフォント仕様.otf:AdobeとMicrosoftが共同で開発したフォント・フォーマット。ブラウザによってはTTFとOTFのみにしか対応していません。記事を読むとわかりやすいかと思います。フォントのウェイトを複数使いたいところでこのブログでは2種類のウェイトを使っています。(7種類もある!といった割には使っているのは2種類です。)複数のウェイトを使いたい場合も簡単です。font-familyを同じにしてfont-weightを変えてあげます。使いたいところで、適宜font-weightを指定してください。format('opentype')}※src:url()の中のフォント名は私が独自でつけたものです。まとめここまでやると、だいぶ表示も早くなったように思います。指定してない時よりはもさっとしてるかな^^;ブログみたいな文字が多いページには、日本語ウェブフォントってあんまりよろしくないような気もしますが、そこまで気にならない気もするので、しばらくこれでいこうかなと!思います。Sansの方が読みやすい気がする^^個人的な話をすると、フォント制作とか結構興味がある。大学1年生の時に実習でギリギリ読めるフォント的なものを(ひらがなだけ)作ったけど、あれはあれで楽しかったな〜とふと思い出しました。その時のは見せれる代物じゃないけど、いつかちゃんと作る機会があったら、やってみたいな〜。・2016年が終わろうとしている・iPhone/iOSアプリの音量調整について思った事。・大学4年生の冬目前。Webデザイン力を上げる。(3)PopularWebデザイン力を上げる。Sans」を使ってみた。17,570ビューイラレで縦横固定の一括リサイズmemo15,357ビューWebデザイン力を上げる。Webトレースをやってみよう!-メリット編-9,544ビューイラレでギザギザをつくる。ついでに角丸もつくる。自分用のメモだったり、学んだことだったりを記事にします。UNITEDのいちメンバーとしても活動中。故郷熊本にちなんだLINEスタンプをつくりました。【ポートフォリオサイトはこちら】PopularWebデザイン力を上げる。Sans」を使ってみた。17,570ビューイラレで縦横固定の一括リサイズmemo15,357ビューWebデザイン力を上げる。Webトレースをやってみよう!-メリット編-9,544ビューイラレでギザギザをつくる。ついでに角丸もつくる。自分用のメモだったり、学んだことだったりを記事にします。UNITEDのいちメンバーとしても活動中。故郷熊本にちなんだLINEスタンプをつくりました。