css で適用されたフォントに応じてフォントサイズを変える

Question

font-family: a,b

と書くと、a というフォントがあればaが適用されて、aがなければbが適用されますが、この適用された方に応じてフォントサイズを変更する良い方法ってありますでしょうか？

aとbで同じフォントサイズを指定しても実際の大きさが異なるため、aが適用されたら13px、bが適用されたら15pxのようにして実際に見える大きさを合わせたいです。

今のところ、JavaScriptでフォントaが存在するかを調べて、あるならaが適用されてるはずなのでfont-sizeを書き換えるという方法くらいしか思いついていないです。

もっと良い方法（できればCSSだけでできる方法）がありましたら教えていただきたいです。

Answer 1

そもそもな話ですが、環境によるフォントの変化に合わせるより、Webフォントにしゃうってのはどうですかね？

Comments

[lazex]

それも考えたのですが、できればコレがいいっていうフォント（今回の例の"a"）はフリーではあるのですが、webfontは用意されて無く、個人でwebfontで配布していいけどアクセス数に応じたお金が発生するらしいんです。
なので、PCに入ってる人はそれで見てもらって、入ってない人は別のフリーのwebfont（今回の例の"b"）でみてもらうことにしています。
b の候補はどれも a とフォントサイズが違っていて、フォントごとにサイズ指定したいと思って今に至ります。

[ippya]

Google Fonts ( https://www.google.com/fonts/ ) で結構な数のWebフォントが無料で使えますが、ダメですかね？

[lazex]

はい、そこでも"a"のほうはなかったです。
webfontにするのがお金かかる以上そこでも出さないんだと思います。
"b" の方のフォントはそこから使ってます。

Answer 2

今のところ、JavaScriptでフォントaが存在するかを調べて

とあるのを見落として,javascriptでの(しかも実用性の低い)実装方法を一生懸命書いてしまいましたので、修正しました。
それだけというのもあれだと思ってリファレンスみてみたらfont-size-adjustがそれっぽかったのですが、どうも廃止された要素で使えるのは古いfirefoxのみのようです。

同じ問題でよく悩みますが、純粋なcss指定だけでの解決方法は目にしたことがありません。
javascriptで無理するくらいなら、サイズが異なっても見難くならないよう全体のデザインを調整したり、特殊なフォントの利用が一部分のみなら画像にしたりで妥協しようかなとなることが多いです。

Comments

[lazex]

font-size-adjust は一度廃止されて、最新のCSS3で復活してますね。
ドラフトでも定義されています
https://drafts.csswg.org/css-fonts/

ですがおっしゃられてる通り、Firefoxしか対応してないのですよね。。。

コードブロックや引用などに使うので、画像にするというのは難しいです。
できれば一番見せたい a に合わせたサイズのフォントを b にしたいのですけど、良いサイズの b が見つからなくて今に至ります。

Answer 3

font-size-adjust もうまく使えないでしょうし、難しいですね…

以下は間違っています
CSS font Property によれば、font プロパティで、"font-style font-variant font-weight font-size/line-height font-family" をまとめて指定できます。ここの、font-size と font-family だけを使えばよいのではないでしょうか。

Comments

[lazex]

font: 13px a, 15px b;
のようにつかうということでしょうか？

font プロパティはまとめて指定できますが、複数かけるのはfont-familyのみで、font-sizeは1つしかかけないようです。
↑の例はエラーでした。

[takotakot]

そうなのですね…失礼しました。