Help us understand the problem. What is going on with this article?

特定のフォントがインストールされているか調べる方法

More than 3 years have passed since last update.

あるフォントがインストールされている場合は、そのフォントを使いたい。でもない場合は、WEBフォントを使用したい。そういった場合にフォントがマシンにインストールされているかどうかを調べる方法です。

ダミーのフォントと調べたいフォントで適当な文字列を見えない場所に置いてみてその大きさを比較するといいみたいです。大きさが違ったらそのフォントがインストールされているのがわかります。なるほどと思いました。

[追記]

こちら、Canvasの文字要素のフォントの選択の際に作成しました。
HTML要素の、ウェブフォントとローカルフォントの選択の際は、コメント欄に書いていただいた方法が有用です。

以下CoffeeScriptです。

fontCheck = (fontname)->
  # クォーテーション付きのfont-family対応
  fontname = fontname.replace /\'/g,"\'"
  fontname = fontname.replace /\"/g,"\'"

  testText = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!?1234567890あいうえおかきくけこさしすせそ"
  testStyle = "font-size:100pt; position:absolute; top:-10000px; left:-10000px; color:white; text-align:left; border:0; margin:0; padding:0 ;white-space:nowrap; "
  dummyStyle = testStyle+"font-family:dummyfont;"
  fontStyle = testStyle+"font-family:"+fontname+";"
  dummyText = "<div id='dummyText' style='"+dummyStyle+"'>"+testText+"</div>";
  fontText = "<div id='fontText' style='"+fontStyle+"'>"+testText+"</div>";

  $("body").append dummyText
  $("body").append fontText

  dummyTextSize = [$("#dummyText").width(),$("#dummyText").height()]
  fontTextSize = [$("#fontText").width(),$("#fontText").height()]

  $("#dummyText").remove()
  $("#fontText").remove()

  dummyTextSize[0] != fontTextSize[0] || dummyTextSize[1] != fontTextSize[1]

下記を参考にしました。

JavaScript/CSS Font Detector › lalit.org
レンダリングに使われているフォントと、ブラウザで使えるフォントを取得する - latest log
shaggggy
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away