如何在查询移动设备中更改全身字体系列。

时间:2013-07-09 07:10:52

标签: jquery-mobile

您能否告诉我如何更改整个应用程序的字体系列。 我能够改变字体大小。但现在我需要在我的应用程序中更改字体类型。我怎么能这样做?

从这里我改变字体:

div data-role="fieldcontain">
    <label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
    <select name="select-choice-1" id="select-choice-1">
        <option>Select Font</option>
        <option value="9">9 px</option>
        <option value="10">10 px</option>
        <option value="11">11 px</option>
        <option value="12">12 px</option>
        <option value="13">13 px</option>
        <option value="14">14 px</option>
        <option value="15">15 px</option>
        <option value="16">16 px</option>
        <option value="17">17 px</option>
    </select>
</div>
$(document).on('change', '#select-choice-1', function() {

    var style;
    var font = $(this).val();
    if ($('head').find('style.font').length === 0) {
        style = $('<style class="font">.font { font-size: ' + font + 'px !important; }</style>');
        $('head').append(style);
        $('body *').addClass('font');
    } else {
        $('body *').removeClass('font');
        $('style.font').empty();
        style = '.font { font-size: ' + font + 'px !important; }';
        $('style.font').append(style);
        $('body *').addClass('font');
    }
});

现在我需要更改字体系列的方法吗?

<div data-role="fieldcontain">
     <label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
     <select name="select-choice-1" id="select-choice-1">
         <option>Select Font family</option>
         <option value="AntiquaAntiqua">AntiquaAntiqua</option>
         <option value="Arial"> Arial </option>
         <option value="Blackletter">Blackletter</option>
     </select>
</div>

1 个答案:

答案 0 :(得分:0)

尝试以下方法。我不知道classesToChange变量是否包含所有需要更改的类,但它对我来说很好。

HTML:

<select id='select-choice-1'>
  <option>Select Font family</option>
  <option value="AntiquaAntiqua">AntiquaAntiqua</option>
  <option value="Arial"> Arial </option>
  <option value="Blackletter">Blackletter</option>
</select>

的JavaScript

$("#select-choice-1").change(function(){
  var fontFamily = $(this).val() || "Arial"; 
  var classesToChange = ".ui-body-c,.ui-btn-text,.ui-li-divider,.ui-header,.ui-li,.panel";
  $(classesToChange).css("font-family", fontFamily);
});