Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io
Intro このサイトのフォントに Web Font を適用することにした。 フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。 また、このサイトでは使用しないだろう文字を削除したサブセットを作ることで、フォントサイズを最適化した。 フォントサイズの最適化 Noto font は、そもそも豆腐(フォントがなかった場合に代替表示される四角)が出ないように(No-豆腐)することをコンセプトにしているため、フォントの網羅率は非常に高い。 そのため Web Font として利用する場合は、全体だとサイズが大きすぎるため、言語毎に提供されるフォントセットの中から、必要なフォントのみを適用することになる。 本サイトでは、 ASCII 、記号、日本語のフォントを用いる。 しかし、特に網羅された漢字の中には、日常では使わない文字が多々ある。 加えて
WebフォントのCSS指定2014年度版とこれまでの歩み
比べる。 WEBCRE8.jpとその仲間達で、web制作における「選択」に おいて最良だと思われるものを考察していくカテゴリです。 最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない部分もあると思うんで何か指摘があったらがんがんツッコんでくださいw @font-faceルール @font-faceルールは、Webフォントの名称と読み込むフォントファイルを関連づける@ルールの一つです。その他、どのウェイトやスタイルに対応するかも指定できます。 しかしWebフォントの扱いはブラウザ側のフォントファイルの対応状況、フォントファイル自体の進化によって変遷してきました。 Bulletproof Syntax これまでWebフォ
意外と多い!? Web フォントに対応していない環境 〜2012 年の Web フォント事情〜 - てっく煮ブログ
html5Web フォントは「Web サイトにオリジナルのフォントを埋め込む」ための技術です。現行のブラウザーは全て Web フォントに対応している状況です。そんな状況であるため、絶対にコピペできない文章を作ったったwwww は Web フォントに依存したコンテンツでしたが、特別な配慮はせずに公開しました。しかし、公開後、Web フォントが適用されなかった複数の方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。４種類のフォーマット一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
絶対にコピペできない文章を作ったったwwww - てっく煮ブログ
html5一見、コピーできるように見えますが、ペーストしてみると・・・。ツイートする
FOUT
Flash of Unstyled Textの頭文字をとってFOUTと呼ばれる現象がある。FirefoxでWebフォントの読み込みが完了するまで別のフォントが使われる現象のことで、後にSafariやChrome、Internet Explorerで起こるようになった読み込みの完了まで空白になる現象のことも含めてFOUTと呼ぶことが多い(気がする)。このWebサイトでも起こっていて、それについて聞かれたのでさらっと書いてみる。 この現象の原因はCSSの処理やWebページのレンダリングと並行してWebフォントのHTTPリクエストが行われることにあるので、仕様と言って良い。起こらないようにするにはWebフォントの読み込みが終わるまで他の処理をブロックするとかしないといけないため、改善される可能性はあるけどまず直ることはない。日本のWebサイトではあまり起こらないように感じるのは、Webフォント自
DingbatのWebフォント
将来的にブラウザでJavaScriptのリサイズや移動の許可・不許可設定みたいにWebフォントを使う・使わないを設定できるようになると思うんですよ(CSSアニメーションやトランスフォームとかも)。そうなるとDingbatのWebフォントを使った場合、その部分は普通のフォントで表示される可能性が高く、無意味な文字列が表示されるんではないかなと。既に現状でもドキュメントで指定されたフォントを使用しないという設定を有効にしているとそうなります。 例えばDingbatのWebフォントの利用デモであるCSS-TricksのIcon Fonts are Awesomeで使われているFicoではBに吹き出しの絵が割り当てられています。この吹き出しは以下のようなコメント数の表示などに対して使うことになるでしょう。 <a href="#comments" class="icon comment-info">
Google Web Fontsの全書体をプレビュー
Google Web Fontsの全書体を一気にプレビューするツールを作った。公式のFont Previewerを使ってるとサンプル文字列が突如リセットされたりとかアレだったので……。 使い方は左の入力ボックスにプレビューに使う文字列を、右のテキストボックスにフォントサイズをpx単位の数字で入力してボタンをクリック。クリック！ 手抜きなのでEnter押してもダメ！ すると下にズラッとプレビューされる。太字にしたりスモールキャプスにしたりとかの細かいスタイル指定はFirebugやDeveloper Toolsとかでやれば良いと思う。.previewというクラスのスタイルをいじれば反映される。contenteditable使ったスタイル編集機能とかなら付けてもいいかもしれない。 ソースを見ればわかる通りYQLで公式のFont Previewerをスクレイピングしてフォント名一覧を入手し、あとは
WebFonts として利用できるフリーの和文フォント | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
GoogleがWebフォントサービスを開始 - フォントブログ
Webフォントが一般に広まった全盛期には国内外含め様々なWebフォント配信サービスが登場しましたが、まさに戦国時代そのもので、数年後には多くのサービスが終了となってしまいました。 2023年現在、利用されているWebフォントサービスをまとめてみました。 Google Fonts 完全無料で誰でも利用可能ということもあり、現在一番利用されているGoogle Fonts。定番のNoto Sans以外にも、ZEN 角ゴシックやBIZ UDゴシックなど、プロ仕様の日本語フォントも使えます。デスクトップ用のフォントもダウンロード可。 Adobe Fonts Adobe Creative Cloud契約者なら誰でも使えるAdobeのフォントサービス。かつてはTypekitの名でサービス展開されていました。完全に日本語化され昔に比べるととても使いやすくなりました。デスクトップ用のフォントもダウンロード可
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
