FontFaceSet: check() method - Web APIs | MDN
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. Learn more See full compatibility Report feedback The check() method of the FontFaceSet returns true if you can render some text using the given font specification without attempting to use any fonts in this FontFaceSet that are not yet fully loaded. T
GitHub - foliojs/fontkit: An advanced font engine for Node and the browser
Supports TrueType (.ttf), OpenType (.otf), WOFF, WOFF2, TrueType Collection (.ttc), and Datafork TrueType (.dfont) font files Supports mapping characters to glyphs, including support for ligatures and other advanced substitutions (see below) Supports reading glyph metrics and laying out glyphs, including support for kerning and other advanced layout features (see below) Advanced OpenType features
ztext.js | 3D Typography for the Web
Are you using ztext and happy with it? Your kind support keeps open-source JS libraries like this free for others. InitializationThere are multiple ways to use ztext. Pick whichever method is easiest for you. HTML attributesVanilla JavaScriptReact JS NewVue JS New How it worksZtext gives the illusion of volume by creating layers from an HTML element. There's no need to spend hours fiddling with <c
GitHub - glyphic-co/textblock: Continuously responsive typesetting — Demo:
A javascript tool for adjusting size, leading, and grades to cast continuously responsive typography. It works over your current CSS as a progressive enhancement. The script calculates your setting based on minimum and maximum values for font size, line height, variable grades, and container width: minimum/maximum font size minimum/maximum line height minimum/maximum container width minimum/maximu
けものフレンズ ロゴジェネレータ
けものフレンズ ロゴジェネレータ！ ↓ここに もじを いれてね！ もじが かけたら、 ロゴがぞうをダウンロード！ボタンをおして がぞうを ほぞんしよう！ すまーとふぉんなら ロゴを長押しして『画像を共有』をするか、スクショでもいいとおもうよ。 おもしろかったら Tweet もしてね！
CSS Font LoadingとFont Face Observer、Web Font Loader
CSS Font LoadingとFont Face Observer、Web Font Loader ウェブ標準であるCSS Font Loadingが気軽に使えるようになるにはまだまだ時間がかかりそうだ。そのポリフィルであるFont Loaderは動作が不安定かつ開発が止まっており信用できない。代替技術としてはポリフィルと同じ開発者が積極的にコミットしているFont Face Observerと、広く使われているWeb Font Loaderがある。同じフォントの読み込みを検知する場合、この三者ではどのようにコードが変わってくるのだろうか。 以下のコード例では、自前でホスティングしているOpen Sansの読み込みが完了・失敗したらbody要素にクラスを振るという単純なケースを書き分ける。 CSS Font Loading仕様はPromiseによる実装で、読み込み待ちはPromiseで
ナウでヤングな CSS Font Loading - Qiita
Web フォントがレンダリングされるタイミングを得ようとすると、そのやんちゃな挙動を制御するため人類は今まで下記のような対策をしてきた。 Web FontsをHTML Canvasで使う canvas要素にwebフォントを確実に描画する方法 typekit/webfontloader 無知な僕は同様の事象にハマり、一通り調べた後、下記の答えにたどり着いた。 canvas に WebFont を指定するとき、一回どこかの DOM で使う WebFont をレンダリングしておかないと死に至る現象を発見したので皆様もお気を付けください — ダメレオン (@damele0n) April 10, 2014 要するに DOM もしくは canvas 上で、そのフォントが指定されていて一度そのフォントがレンダリングされてからでないと canvas 上はレンダリングされない、ということだ。 (ちなみに
woffglitch.js作った - 山ブログ
https://github.com/hryk/woffglitch.js 数年前、glitch workshop after partyで、youpyさんがフォントをグリッチしてスクリーンに映していたのを見た。それがすごく格好よくて、ブラウザ上で再現できないかと思ってwoffをグリッチするコードを書こうと思ったのが1年と少し前、そろそろちゃんと動く物にしたいと思っていたところに最高の夏合宿が開催されたので動作するところまで持っていった。 あの時見た壊れ方とは全然違っていて、なかなか思ったようには表示出来ないので色々試している。 デモ http://www.1vq9.com/woffglitch/demo/ Google Fontsから取得したwoffをJavascriptでパースして、特定のfont tableを書き換えて再構成している。
フォントの読み込み完了を検知する
TypeKitとかがやってるWebフォントの読み込みが終わったらhtml要素にクラス名を振るアレの話。TypeKitがオープンソースでリリースしているWebFont Loaderを使う方法が安全で安定。Googleがホスティングしているのもあるので手軽でもある。でも読み込み完了の検知以外にも機能があってパワフルすぎる気がするので、Adobe Blankを使って自前で書いてみることにした。 Adobe Blankのサイズ削減 Adobe Blankはそのまま使うと30KB以上ある。読み込み完了検知だけなら幅0のグリフが1つあればそれで良いので、まずはサブセット化してサイズを抑えることから。aだけのWOFFなAdobe Blankを作ればちょうど1KBくらいになる。 Download: adobe-blank.woff @font-face定義の追加 外部リクエストにすると意味が薄れるのでDa
jsdo.it
We’re getting things ready Loading your experience… This won’t take long.
Test if a font is installed via JavaScript : ls.n
There are a few threads available on the web with regard to how to test if a font is installed on a client machine, but I'm not satisfied with any of those that I found. The reason being that they each seem to use a single common font as a baseline measurement and compare the dimensions of some reasonably complex string rendered in the common font against the same string rendered in the test font.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font Family and @supports
Release v2.0.0 · foliojs/fontkit
GitHub - opentypejs/opentype.js: Read and write OpenType fonts using JavaScript.
opentype.js – JavaScript parser/writer for OpenType and TrueType fonts.
GitHub - hail2u/detect-font-loading: A JavaScript library for adding class name to `html` element when font loaded.
JavaScriptでフォントサイズ計測 - 開発な日々