iT邦幫忙

0

如何在Firefox裡取得客戶端安裝的所有字型

makey 5 年前3218 瀏覽

使用IE 特有的 ActiveX,加上 JavaScript 是可以獲取
客戶端所安裝的字型。但是在其他的瀏覽器,如 Firefox、
Chrome 就無法取得客戶端電腦安裝的字型。

所以只單純用 JavaScript,只能在 IE 瀏覽器上取得字型。

但如果JavaScript 藉由 Flash的幫助,是可以在 FF、Chrome
等瀏覽器裡讀取客戶端的字型。例如下列這個網站:

http://www.typetester.org/

http://font-detect.s3.amazonaws.com/index.html

修改 http://font-detect.s3.amazonaws.com/index.html 網站
程式碼後,雖然 Firefox也可以獲取客戶端字型,
但字型選項卻無法像 IE和 Chrome 順利的嵌入至下拉式選單裡。
可能是 select append option 語法的問題。

測試的網站:
http://design100.web.fc2.com/

程式碼檔案:
http://design100.web.fc2.com/getClientFont.zip

請教前輩們,JS程式碼該如何修改,才能在 Firefox 的下拉式選單
嵌入客戶端字型呢?

1 個回答

2
逮丸逮丸
iT邦大師 1 級 ‧ 5 年前
最佳解答

不曉得你有沒有留意到 edit 裡的範例,
利用其中的 font-detect-edit.js 來套用就可試成功?
試成功的結果放在 這裡
我直接套用 Edit 範例裡的 option,直接先寫在 html 裡,而不是用javascript 畫出,
然後再把 font-detect-edit.js 裡面的 setFonts, updateSelect 裡的片段,
就順利把所有偵測到的的字型名稱畫到option的下面:

<pre class="c" name="code"><body style="font-family:Verdana;">
      <select id="font-family">
        <option value="---">選字型!</option>
      </select>
<div id="content">
   <div class="noprint">
      <p id="status">
         <span>Checking Flash version...</span>
      </p>
   </div>
</div>
<div id="font-detect-swf"></div>
<script type="text/javascript">
  $(document).ready(function() {
  // Check Flash version
  if (!swfobject.hasFlashPlayerVersion("9.0.0"))
    $("#status span").html("You don't have a compatible version of Flash installed?");
  else
    $("#status span").html("Loading... (this may beach ball your browser for ~10 seconds)")
    var fontDetect = new FontDetect("font-detect-swf", "FontList.swf", function(fd) {
    var fonts = fd.fonts();
  //  console.log(fonts);
    this._fonts = fonts;
    var options = [];
    for (var i = 0; i < this._fonts.length; i++) {
      var fontDesc = this._fonts[i].fontName;
    options.push('<option value="' + fontDesc + '">' + fontDesc + '</option>');
    }
    $("select#font-family").html(options.join());
    });
   });
</script>

這應該夠你改成你要的結果吧!

makey iT邦新手 4 級 ‧ 5 年前 檢舉

真的可以呢!這的確是我要的功能。
謝謝twtw前輩的指導,iT邦幫忙真是臥虎藏龍。
程式的差異是什麼,我要研究一下。
實在好開心哩。再次感謝twtw。^^

我要發表回答

立即登入回答