如何更改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

您可以使用此插件获取设备的所有字体列表：

cordova插件字体

然后你可以向用户显示一个列表，让他们选择一个，然后你用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网络字体生成器将任何字体转换为网络字体，并为你生成所需的css。

我应该补充一点，我没有测试这个，所以如果你发现它不起作用，请告诉我。

---

或者，如果你的应用程序设计为只有在用户连接互联网时才能工作，那么有一种更快的方法可以添加大量字体。有一个jQuery插件可以做到这一点。