如何在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插件可以做到这一点。