当前位置：文江博客话题详情

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

发布于 2025-01-08 08:45:24 字数 355 浏览 5 评论 0原文

我最近将 jQuery mobile 添加到我的网站。

然而jQuery主题打破了我以前的字体。虽然我的大部分页面都运行良好，尤其是漂亮的 jQuery Mobile 滑块，但我在字体方面遇到了真正的问题。

我设置了自定义字体，并且无需 jquery mobile css 即可正常工作。但是，一旦我包含 jquery mobile css，它就会覆盖我的字体。

我尝试将 data-role=“none” 添加到正文和 div，但这没有帮助。

我也尝试添加 data-theme = "none" 但这也没有帮助。

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

感谢您的帮助。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青巷忧颜 2025-01-15 08:45:24

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

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

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

Here is my CSS for replacing the entire applications font with Roboto, the Android 4.0 ICS font.

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

You may have to target specific elements too if the above is not enough. I had to also include the following:

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

I hope you come right. Good luck.

回复收藏 0 原文

新雨望断虹 2025-01-15 08:45:24

我会检查该元素并准确找出指定字体的位置，例如我刚刚发现此处指定了字体：

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

因此您可以通过指定相同的选择器并呈现您自己的字体来覆盖您自己的样式表中的字体:)

I would inspect the element and find out exactly where the fonts are being specified for example I just found that font's are specified here:

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

So you can override that in your own stylesheet by specifying the same selector and presenting your own fonts :)

回复收藏 0 原文

一个人的旅程 2025-01-15 08:45:24

据我了解... jQuery mobile 可能只是将他自己的 css 字体发送到您的组合中。如果您有一个带有字体集的 css 文件：

尝试通过为您的字体样式添加 !important 进行一些测试。

希望这能帮助您找到解决方案:)

回复收藏 0 原文

你在我安 2025-01-15 08:45:24

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

Thanks to the help by agrublev and darryn.ten the following worked for me:

Here are examples to change the shadow of the body and fonts:

.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;
}

回复收藏 0 原文