Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io
Intro このサイトのフォントに Web Font を適用することにした。 フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。 また、このサイトでは使用しないだろう文字を削除したサブセットを作ることで、フォントサイズを最適化した。 フォントサイズの最適化 Noto font は、そもそも豆腐(フォントがなかった場合に代替表示される四角)が出ないように(No-豆腐)することをコンセプトにしているため、フォントの網羅率は非常に高い。 そのため Web Font として利用する場合は、全体だとサイズが大きすぎるため、言語毎に提供されるフォントセットの中から、必要なフォントのみを適用することになる。 本サイトでは、 ASCII 、記号、日本語のフォントを用いる。 しかし、特に網羅された漢字の中には、日常では使わない文字が多々ある。 加えて
2018年のウェブフォントについて
少しの間Noto Sans Japaneseを利用していたが、すぐに止めた。やはりFOITが気になる。かといってFOUT強制も苦肉の策という印象しかない。……このような記事を書いていたら、先にうまくまとまったfont-displayデスクリプターについての記事が広まっていたので、そちらを読むのが良い。 他が高速・即時化しつつある現在、1MBくらいを超えるウェブフォントはどうにもならない。動的なサブセット化はわからなくもないが、労多くして……という印象だ。自前で作るのも難しいし、安心して任せられる速さの提供者は知らない。 回線の状況(種別ではなく)に応じてうまいこと切り替える仕組みを導入しなければならないだろう。そうなるとデバイスから「今、回線あんま速くないです……」といった動的な情報を得たいが、プライバシーにかかわるので難しい。残る可能性はfont-displayデスクリプターのみだ。 @
Noto Serif CJK（源ノ明朝）の font-feature-settings:palt 対応サブセットフォントを作る - Qiita
Noto Serif CJK（源ノ明朝）の font-feature-settings:palt 対応サブセットフォントを作るfontNotoSansfonttoolsNotoSerif はじめに 2017年4月に Google と Adobe による共同開発フォント「Noto Sans CJK（源ノ明朝）」が発表されました。 さっそくサイトでも使いたいところですが、そのままでは1ウェイトあたり約23MBもあるのでユーザーにかなりの負担を強いてしまいます。そこでサブセットを作ることにしました。 ここで言う「サブセット」とは必要な文字だけを抜き出したフォントファイルのことです。 サブセットフォントメーカーは使わない 以前は武蔵システムさんの「サブセットフォントメーカー」という大変素晴らしいツールを使っていましたが、OpenTypeFontの情報をごっそり削ってしまいます。そのため CSS の
Noto Sans (源の角ゴシック) をWebフォントで使えるように軽量化する方法 - あなたのスイッチを押すブログ
ウェブフォントにハマりすぎて、かなり泥沼化していたのですが…。この度ようやく1つのゴールに辿り着くことができました。 その結果が「Noto Sans CJK JP」の採用です。 しかしこのフォント、Webフォントとして使用するには些かサイズが大きすぎるのが問題。そのまま使ってはページの読込速度に大きく影響してしまいます。 そこで必要なのが、フォントの軽量化。具体的にはこれを「サブセット化」と言います。 Noto Sans とは？ 最初にちょっと「Noto Sans」というフォントについてご紹介しましょうか。 これは、 Google が、Adobe と共同開発した無料かつオープンソースのフォントファミリーNoto Sans CJK をリリースしました。 via: Google、オープンソースの日中韓フォントNoto Sans CJK を無料配信。Adobe と共同開発 - Engadget
Noto Sans CJK JP フォントをダウンロードしてサイトに適用する手順 - Qiita
CSSの埋め込み方まで詳細に説明している所がなかったのでまとめてみました。 デモプレビュー 書き出しサンプル + デモデータ 一式 1. フォントダウンロード 2. アプリインストール サブセットフォントメーカー WOFFコンバータ OTF → WOFF + EOT WOFF → TTF http://opentype.jp/woffconv.htm 3. サブセット化 サブセットフォントメーカーを使用してフォントをサブセット化しファイルサイズを削減します。 以下、アスキー文字 + 非漢字文字 + 第1水準漢字でサブセット化すると 16MB→700KB 位になります アスキー文字 !”#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
