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-plugin-fonts

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

我应该补充一点，我没有对此进行测试，如果您发现它无效，请告诉我。

或者，如果您的应用程序仅在用户具有互联网连接时才能工作，那么可以更快地添加大量字体。有一个jQuery plugin可以做到这一点。

如何更改phonegap中的字体系列

2 个答案: