Question

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

然而，jQuery主题打破了我以前的字体。虽然我的大多数页面都很好用，特别是漂亮的jQuery Mobile滑块，但我遇到了字体的真正问题。

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

我尝试过添加data-role =＆＃34; none＆＃34;对身体和divs但这没有帮助。

我也尝试过添加data-theme =＆＃34; none＆＃34;但这也无济于事。

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

感谢您的帮助。

Answer 1

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

  @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";
  }

我希望你说得对。祝你好运。

Answer 2

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

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

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

Answer 3

据我了解... jQuery mobile可能只是将自己的css字体发送到你的混音中。如果您的css文件设置了字体：

通过为您的字体样式添加！important来尝试一些测试。

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

Answer 4

感谢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;
}

Answer 5

为jquery mobile创建自己的css，并覆盖字体系列，提供自己的字体系列

Answer 6

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

在“全局”标签中设置字体（对我来说：Raleway，Verdana等），下载并安装主题并进行设置。对于jqmobile，你需要使用你的主题css，jqm图标和常见的单个jqm css的jqm结构INSTEAD。

覆盖css中的内容可能会让你在不同的浏览器中遇到麻烦......而这与jquerymobile无关。

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

6 个答案: