実際にレンダリングされているフォントの種類によって、スタイルを変更することは可能ですか？

Question

CSSでは、フォントファミリーを複数指定すると思います。
しかし、フォントの種類によって、見た目の文字サイズや余白感などが変わってしまうので、
実際にブラウザでレンダリングされているフォントごとにCSSのスタイルを変更する方法がないかと思って、質問してみました。

もし、JavaScriptとかで条件分岐する方法がございましたら、教えていただきたいです。
よろしくお願いいたします。

Answer 1

レイアウトを調整する目的であれば、Webフォントを利用すると比較的同じ見た目に近づきます。

【実はすごく簡単！webフォントの使い方＆日本語対応webフォントまとめ | Web制作会社スタイル】
http://www.hp-stylelink.com/news/2013/08/20130829.php

【Google が提供する日本語 Web フォント - Qiita】
http://qiita.com/shotets/items/502f8093d53369eaab50

---

「どれが選択されているか」ではなく「どのフォントが使えるか」なら下記方法で調べることができるようです。

【JavaScriptでインストールされているフォントを調べてクラスを付与する – WEBUTUBUTU】
https://webutubutu.com/webdesign/4369

【JavaScriptで特定のフォント（文字列）がインストールされているかどうかを調べる | ある蜜柑の上にアルミ缶】
https://s8a.jp/javascript-is-installed-font

Comments

[alex77n]

やっぱり、JavaScriptでフォントを操作するのは難しいんですね！

「どのフォントが使えるか」をJavaScriptで調べる方法があるというのは驚きでした！！
確かにWordmark.it（https://wordmark.it/）とかありますもんね。

ありがとうございます！！

Answer 2

フォントによってレイアウトが変わるような繊細な設定であれば
画像で処理するのが妥当です

Comments

[alex77n]

ですよね。。
ご回答ありがとうございます！！

[otn]

画像にしないと解決できないような微細な要件を出す方が間違っている気がします。
要件策定者に改善要望すら出せない力関係ならしょうがないですが。

Answer 3

この質問に対しては、現状、「解決するのは無理！」ってことで、スッキリ解決しました！

Webフォントにするか、SVG画像にするか、ある程度デザインを妥協するかってところですね。

kei344さんの情報提供は助かりましたので、ベストアンサーにさせていただきます！
ありがとうございました！