Rendered Fontとは何ですか？

Rendered Fontはnewsnepiaによって開発されたChromeの拡張機能で、その主な機能は「選択文字列に適用されているフォントを判定します。」です。

拡張機能のスクリーンショット

Rendered Font拡張機能のCRXファイルをダウンロード

Rendered Font拡張子のファイルをcrx形式でダウンロードし、ブラウザにChrome拡張機能を手動でインストールするか、crxファイルを友達と共有して簡単にChrome拡張機能をインストールします。

拡張機能の使用方法

■使用方法

フォント判定したい文字列を選択し、右クリックで「Rendered Font」をクリック。
※選択文字列の最初の一文字が判定対象となります。

■ブラウザのフォント適用ロジックについて

フォントはfont-familyに指定された順番で優先的に適用されます。また、フォントに該当の文字列が格納されていない場合は次の優先順位のフォントが適用され、いずれも適用できるフォントが無い場合はブラウザに設定されたデフォルトのフォントが適用されます。
つまり同じ文章でも一文字単位で違うフォントが適用される可能性があるため、フォント判定は任意の一文字を対象にする必要があります。

■フォントの判定プロセス（概要）

< 判定対象文字列の指定 >
１．ブラウザ上で判定対象となる文字列を選択し、右クリックで「Rendered Font」をクリック。選択文字列の最初の一文字が判定対象となります。

< font-familyの取得 >
２．文字列を格納するDOM要素を取得し、window.getComputedStyleで要素に指定されているfont-familyを取得。

< 判定対象の文字列にfont-family中のどのフォントが適用されているかを調べる >
３．テスト用DOM要素を作成し、判定対象の１文字を10個（任意）ほど格納する。
４．まずは２で取得したfont-familyをそのまま適用したときの要素のwidthとheightを調べる
５．次にfont-familyに設定されたフォント名をそれぞれ単独で適用したときのwidthとheightを調べ、４の値と比較し、値が一致したフォントが実際に適用されているフォントであると判定します。

拡張機能の基本情報

名前	Rendered Font
ID	keddhhgbmgaoliichbaikplccgefgpep
公式URL	https://chrome.google.com/webstore/detail/rendered-font/keddhhgbmgaoliichbaikplccgefgpep
説明	選択文字列に適用されているフォントを判定します。
ファイルサイズ	21.82 KB
インストール数	89
現在のバージョン	0.0.1
最終更新日	2018-01-22
公開日	2018-01-22
評価	5.00/5 合計 1 レビュー
開発者	newsnepia
Eメール	[email protected]
支払い方法	free
対応言語	ja
manifest.json
{ "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx", "manifest_version": 2, "name": "Rendered Font", "version": "0.0.1", "description": "\u9078\u629e\u6587\u5b57\u5217\u306b\u9069\u7528\u3055\u308c\u3066\u3044\u308b\u30d5\u30a9\u30f3\u30c8\u3092\u5224\u5b9a\u3057\u307e\u3059\u3002", "icons": { "16": "img\/icon16.png", "48": "img\/icon48.png", "128": "img\/icon128.png" }, "browser_action": { "default_icon": { "16": "img\/icon16.png", "48": "img\/icon48.png" } }, "background": { "scripts": [ "js\/background.js" ] }, "content_scripts": [ { "matches": [ "http:\/\/\/", "https:\/\/\/", "file:\/\/\/\/" ], "css": [ "css\/style.css" ], "js": [ "js\/content.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "img\/bt_close.svg" ], "permissions": [ "activeTab", "contextMenus" ] }