如何更改phonegap中的字体系列答案

【问题标题】：How can i change the font family in phonegap如何更改phonegap中的字体系列
【发布时间】：2015-11-22 17:39:29
【问题描述】：

我想在 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;

问题出在哪里？

【问题讨论】：

标签： cordova fonts setting

【解决方案1】：

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

cordova-plugin-fonts

然后您可以向用户显示一个列表，让他们选择一个，然后您通过 javascript 更改您网站的 css。

我不确定，但可能是，您必须在更改字体后重新呈现页面。

【讨论】：

【解决方案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 generator 将任何字体转换为 Web 字体并为您生成所需的 css。

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

或者，如果您的应用设计为仅在用户连接到互联网时工作，那么还有一种更快的方法来添加大量字体。有一个 jQuery plugin 可以做到这一点。

【讨论】：