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

javascript

makey 2012-04-06 09:21:16 ‧ 4321 瀏覽

分享至

使用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 的下拉式選單
嵌入客戶端字型呢？

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

逮丸逮丸

iT邦大師 1 級 ‧ 2012-04-06 20:12:15

最佳解答

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

&lt;pre class="c" name="code">&lt;body style="font-family:Verdana;">
      &lt;select id="font-family">
        &lt;option value="---">選字型！&lt;/option>
      &lt;/select>
&lt;div id="content">
   &lt;div class="noprint">
      &lt;p id="status">
         &lt;span>Checking Flash version...&lt;/span>
      &lt;/p>
   &lt;/div>
&lt;/div>
&lt;div id="font-detect-swf">&lt;/div>
&lt;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 &lt; this._fonts.length; i++) {
      var fontDesc = this._fonts[i].fontName;
    options.push('&lt;option value="' + fontDesc + '">' + fontDesc + '&lt;/option>');
    }
    $("select#font-family").html(options.join());
    });
   });
&lt;/script>

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