JQuery Mobile-覆盖整个主体的字体系列主题

JQuery Mobile - Override font-family themes for the whole body

本文关键字：字体 系列 主体 Mobile- 覆盖 JQuery      更新时间：2023-09-26

我最近在我的网站上添加了jQuery mobile。

然而，jQuery主题打破了我以前的字体。虽然我的大部分页面都很好用，尤其是漂亮的jQueryMobile滑块，但我的字体确实有问题。

我已经设置了自定义字体，它们在没有jquery mobile css的情况下可以正常工作。然而，一旦我包含jquery mobile css，它就会覆盖我的字体。

我曾尝试将data role="none"添加到主体和div中，但这没有帮助。

我还尝试添加数据主题="none"，但这也没有帮助。

有没有办法在我的页面主体上禁用jQuery自定义字体族主题化？

谢谢你的帮助。

这是我的CSS，用于将整个应用程序字体替换为Android 4.0 ICS字体Roboto。

  @font-face {
    font-family: 'RobotoRegular';
    src: url('../font/roboto/RobotoRegular.eot');
    src: url('../font/roboto/RobotoRegular.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto/RobotoRegular.woff') format('woff'),
         url('../font/roboto/RobotoRegular.ttf') format('truetype'),
         url('../font/roboto/RobotoRegular.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  /* Android jQM Font Style Overrides */
  body  * {
    font-family: "RobotoRegular" !important;
    font-weight: normal !important;
  }

如果以上内容还不够，您可能还必须针对特定的元素。我还必须包括以下内容：

  .ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-bar-a,.ui-body-a,.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a$
    font-family: "RobotoRegular";
  }

我希望你来对了。祝你好运

我会检查元素并找出指定字体的确切位置，例如，我刚刚发现字体在这里指定：

.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button

因此，您可以在自己的样式表中通过指定相同的选择器并显示自己的字体来覆盖它：）

据我所知。。。jQuerymobile可能只是将他自己的css字体发送到您的组合中。如果你有一个css文件的字体集：

尝试添加一些测试！这对您的字体样式非常重要。

希望这将帮助您找到解决方案：）

感谢agrublev和darryn.ten的帮助，以下对我有效：

以下是更改正文和字体阴影的示例：

.ui-body-c,.ui-dialog.ui-overlay-c{
    text-shadow: 0pt 0px 0pt rgb(0, 0, 0); 
}
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button{
        font-family: Helvetica, Arial, sans-serif, Verdana;
        font-size: 12px;
        text-shadow: none;
        color:black;
}

为jquery mobile创建您自己的css并覆盖字体家族，为您自己的字体家族提供

jquery mobile使用主题。打http://themeroller.jquerymobile.com/

在"全局"选项卡中设置字体（对我来说：Raleway、Verdana等），下载并安装主题，就可以设置了。对于jqmobile，您需要使用主题css、jqm图标和jqm结构，而不是通常的单个jqm-css。

在css中重写内容可能会让你在不同的浏览器中遇到不同的麻烦。。。这不是jquerymobile的重点。

相关文章：