Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io
Intro このサイトのフォントに Web Font を適用することにした。 フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。 また、このサイトでは使用しないだろう文字を削除したサブセットを作ることで、フォントサイズを最適化した。 フォントサイズの最適化 Noto font は、そもそも豆腐(フォントがなかった場合に代替表示される四角)が出ないように(No-豆腐)することをコンセプトにしているため、フォントの網羅率は非常に高い。 そのため Web Font として利用する場合は、全体だとサイズが大きすぎるため、言語毎に提供されるフォントセットの中から、必要なフォントのみを適用することになる。 本サイトでは、 ASCII 、記号、日本語のフォントを用いる。 しかし、特に網羅された漢字の中には、日常では使わない文字が多々ある。 加えて
日本語WebフォントにNoto Sans CJK JPを指定する時に気を付けたこと
ライセンスApache License 2.0Noto Sans CJK の配信サービス(余談)Google Fonts : Early Accessでウェブフォントとして配信されている。 Noto Sans Japanese (Japanese) ただフルサイズなので 16MB ぐらいある。さすがに、このサイズは現実的ではない（動作確認には良いかも）。 @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); Noto Sans CJK JP を入手するGoogle Noto Fonts からダウンロードする。 言語ごとにフォントが分けられているので「Noto Sans CJK JP」を選択してダウンロード。 zip 形式で圧縮されているので解凍すると、それぞれの形式のフォントファイルが入ってい
pa11y のレポートを日本語で表示したかったので HTML_CodeSniffer の日本語版作った
pa11y っていうオープンソースのアクセシビリティチェックツールがあります。 これのコマンドラインツールはコマンドラインから簡単にアクセシビリティレポート （もちろん機械的なチェックなのであくまで参考レポートなんですが） を簡単に出力できるってことで、ちょっと仕事の関係で使ってみようと思いましてちょっと前に色々と試していました。 で、結構使えそうだということで本格的に使い始めたんですが、そうなるとやっぱりレポートは日本語で出力されないとってことになります。pa11y はアクセシビリティチェックやレポート出力に HTMLCodeSniffer っていう Squiz 社 （Squiz Pty Ltd） が開発しているアクセシビリティチェック用の JavaScript を使用しているため、これを翻訳した、HTMLCodeSniffer-ja を作成し、公開しました。 HTML_CodeSnif
HTML_CodeSniffer
あなたのHTMLが規約に準拠しているかチェックしましょう HTML_CodeSnifferは、HTMLソースコードをチェックし、設定したコーディング標準に違反している部分を検出するクライアントサイドスクリプトです。HTML_CodeSnifferはすべてJavaScriptで記述されているため、サーバーサイドの処理を一切必要としませんし、開発者はルールを追加することにより、独自の規約も遵守するよう拡張することができます。 てはじめとして、HTML_CodeSnifferにはWeb Content Accessibility Guidelines (WCAG) 2.0の3つの適合レベルと、アメリカ合衆国リハビリテーション法第508条のWeb関連部分の規格が付属しています。また、どんなWebページでもアクセシビリティをチェックできる監査インターフェースがブックマークレットで提供されます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SSSSLIDE
