如何在Phonegap中更改字體系列

Question

我想在phonegap項目中更改字體系列。

意味着用戶可以通過選擇任意字體來更改設置中的字體系列。

我該怎么做？

提前致謝

---

編輯：似乎不起作用。這是我的jQuery代碼：

 $("#font-selector").change(function(){
       $(".size").css("font-family",$("#font-selector").val()); 

   });

和html代碼是：

<select name="changeFont" id="font-selector" onchange='$("body").attr("data-font", $("#font-selector").val())'>
<option value="my font">my font</option>
<option value="my font">my font</option>

CSS代碼是：

@font-face {
font-family: 'my font';
src: url('my font.eot');
src: url('my font.eot?#iefix') format('embedded-opentype'),
     url('my font.woff2') format('woff2'),
     url('my font.woff') format('woff'),
     url('my font.ttf') format('truetype'),
     url('my font.svg#my font') format('svg');
font-weight: normal;
font-style: normal;

問題出在哪兒？

Answer 1

您可以使用此插件來獲取設備所有字體的列表：

科爾多瓦-插件的字體

然后，您可以向用戶顯示一個列表，讓他們選擇一個列表，然后用javascript更改網站的CSS。

我不確定，但是可能是，更改字體后必須重新渲染頁面。

Answer 2

似乎可以使用javascript / css輕松完成。

只需將您的字體運送到應用程序中，以確保它們可在任何平台上使用，然后將偵聽器添加到您的選擇中即可將CSS類更改為正文。

如果您使用的是jQuery或Zepto語法，則這是html代碼。

<select name="changeFont" id="font-selector"  onchange='$("body").attr("data-font", $("#font-selector").val())'>
    <option value="default">Default</option>
    <option value="arial">Arial</option>
    <option value="comic-sans">Comic Sans</option>
</select>

然后在CSS

.mytext {
  font-family: helvetica, sans-serif;
}

[data-font=arial] .mytext {
  font-family: arial, sans-serif;
}

[data-font=comic-sans] .mytext {
  font-family: "comic sans", sans-serif;
}

為此，只需確保已正確添加字體。 為此，您可以使用FontSquirrel Webfont生成器將任何字體轉換為Web字體並為您生成所需的CSS。

我還要補充一點，我沒有對此進行測試，所以如果您發現它不起作用，請告訴我。

---

或者，如果您的應用程序設計為僅在用戶具有互聯網連接時才可以運行，那么有一種添加許多字體的更快方法。 有一個jQuery插件可以做到這一點。