-
- いいね！13
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
2. サブセットフォントメーカーで軽量化＆WOFFコンバーターでさらに軽量化：武蔵システムさんからサブセットフォントメーカー opentype.jp/subsetfontmk.h… WOFFコンバーター opentype.jp/woffconv.htm がダウンロードできます。 #tegeweb
2018-07-29 11:49:34
t_furu ♨
@t_furu
てげWeb #tegeweb 7月。森さんからいまどきのWebフォント 利用する時は そのままだとファイルサイズが重いので、サブセットフォントメーカー ＠武蔵システム というアプリを使って フォントサブセットファイルを作成するらしい。 opentype.jp/subsetfontmk.h…
2018-07-27 19:39:03
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
指定する格納する文字は第一水準漢字と、記号、ローマ字、カタカナ、ひらがながよいようです。参考：【Noto Sans Japanese】ブログの記事を綺麗なフォントで表示したいので最軽量化してみた 11neko.com/font-3/ #tegeweb
2018-07-29 11:52:43
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
3. WebフォントとしてCSSで指定：cssファイルに@font-faceを記述して各フォントファイルをどんな名前のフォント名・太さ（重さ）で使用するのかを指定。太さはnormal, bold以外にも100〜900の値で指定できる。だいたい標準の太さは400で太字は700になる。 clickan.click/how-to-noto-sa… #tegeweb
2018-07-29 11:56:30
t_furu ♨
@t_furu
てげWeb #tegeweb 7月。森さんからいまどきのWebフォント CSS で利用する時の記載方法紹介。font-weight は 100 - 900 まで。Noto Sans CJK JP は 9種類の太さのファイルがあるのでそれぞれ対応しているんだろう話。
2018-07-27 19:45:58
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
日本語フォントはWebでそのまま使うには重い（1ウェイト10MBを超える）のでWebで使うには軽量化が必須。先程のソフトを使ってフォントに含める文字をしぼって軽量化します。 #tegeweb
2018-07-29 11:51:11
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
4. WebサイトのCSSにfont-familyを指定：Webフォントを使いたい要素に対してフォント名（font-family）とフォントの太さ（font-weight）を指定すればOK #tegeweb
2018-07-29 11:57:48
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
ライセンスで重要なポイントは商用利用可能かどうか、再配布可能かどうか（Webフォントは再配布にあたる）、フォントの改変可能かどうか（サブセット化は改変に当たる）、ライセンス表記が必要かどうか 法令遵守の観点からこれは個人でも企業でも大事なこと。 #tegeweb
2018-07-29 12:00:30
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
ようやくWebフォントの最近の流れの話。OpenTypeフォントだと、CSSのプロパティでいろいろいじれます。合字を使うとか、フォントが持ってる文字詰めを利用するとか。 CSS での OpenType 機能の構文 helpx.adobe.com/jp/typekit/usi… #tegeweb
2018-07-29 12:02:28
t_furu ♨
@t_furu
てげWeb #tegeweb 7月。森さんからいまどきのWebフォント OpenType フォントの話。合字と呼ばれる仕組みがある。CSSでも font-variant-ligatures パラメータを利用するとできる。日本語も幅を詰める仕組みがある プロポーショナルメトリクス font-feature-settings palt
2018-07-27 19:55:04
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
Webフォントの表示が遅い問題はfont-displayで解決していくかもしれない。 qiita.com/oreo/items/2e8… font-displayプロパティのブラウザ実装状況はこちら caniuse.com/#feat=css-font… #tegeweb
2018-07-29 12:03:59
t_furu ♨
@t_furu
てげWeb #tegeweb 7月。森さんからいまどきのWebフォント Webフォントは 表示が遅くなる。解決する為の CSS プロパティ font-display が使える。
2018-07-27 19:58:50
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
Variable Font：Apple、Google、Microsoftが共同開発しているフォントの形式。1つのフォントでいろんな見た目（太さや文字幅）のフォントを利用できる FontPlayground play.typedetail.com これはフォントの未来。 #tegeweb
2018-07-29 12:07:10
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
バリアブルフォント – 柔軟なデザインを可能にする新しい種類のフォント adobe.ly/2j6BpbV #tegeweb
2018-07-29 12:07:58
t_furu ♨
@t_furu
てげWeb #tegeweb 7月。森さんからいまどきのWebフォント Variable Font バリアブルフォント / ひとつのフォントファイルでありながら複数のフォントみたいに扱えるフォント
2018-07-27 20:03:45
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
最近話題になった日本語フリーフォントを試せるWebサービス ためしがき tameshigaki.jp #tegeweb
2018-07-29 12:09:04