javascript JQuery Mobile - 覆盖整个身体的字体系列主题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9403868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Mobile - Override font-family themes for the whole body
提问by AlexIIP
I recently added jQuery mobile to my website.
我最近在我的网站上添加了 jQuery mobile。
However, the jQuery theme broke my previous fonts. While most of my page works great, especially the nice jQuery Mobile sliders, I am having a real problem with the fonts.
然而，jQuery 主题打破了我以前的字体。虽然我的大部分页面都运行良好，尤其是漂亮的 jQuery Mobile 滑块，但我在字体方面遇到了真正的问题。
I have custom fonts set and they work correctly without the jquery mobile css. However, once I include the jquery mobile css it overrides my fonts.
我设置了自定义字体，它们在没有 jquery mobile css 的情况下也能正常工作。但是，一旦我包含 jquery mobile css，它就会覆盖我的字体。
I have tried adding data-role= "none" to the body and the divs but that did not help.
我曾尝试将 data-role="none" 添加到正文和 div 中，但这没有帮助。
I have also tried adding data-theme = "none" but that also does not help.
我也尝试添加 data-theme = "none" 但这也无济于事。
Is there a way to disable jQuery custom font-family theming on the body of my page?
有没有办法在我的页面主体上禁用 jQuery 自定义字体系列主题？
Thanks for the help.
谢谢您的帮助。
回答by darryn.ten
Here is my CSS for replacing the entire applications font with Roboto, the Android 4.0 ICS font.
这是我用 Roboto（Android 4.0 ICS 字体）替换整个应用程序字体的 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;
}
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.
我希望你来对。祝你好运。
回答by agrublev
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 :)
因此，您可以通过指定相同的选择器并显示您自己的字体来在您自己的样式表中覆盖它:)
回答by dav
From what I understand... jQuery mobile might just send his own css fonts into your mix. If you have a css file with the font set :
据我了解... jQuery mobile 可能只是将他自己的 css 字体发送到您的组合中。如果您有一个带有字体集的 css 文件：
Try some testing by adding !important for your font styles.
通过为您的字体样式添加 !important 来尝试一些测试。
Hope this will help you figure out a solution :)
希望这能帮助您找到解决方案:)
回答by AlexIIP
Thanks to the help by agrublev and darryn.ten the following worked for me:
感谢 agrublev 和 darryn.ten 的帮助，以下对我有用：
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;
}
回答by dinesh kumar
creat your own css for jquery mobile and override font family give your own font family
为 jquery mobile 创建你自己的 css 并覆盖字体系列给你自己的字体系列
回答by Stephen Hazel
jquery mobile uses themes. Hit http://themeroller.jquerymobile.com/
jquery mobile 使用主题。点击http://themeroller.jquerymobile.com/
set the font in the "global" tab (for me: Raleway, Verdana, etc), download and install the theme and you're set. For jqmobile, you need to use your theme css, jqm icons, and jqm structure INSTEAD of the usual single jqm css.
在“全局”选项卡中设置字体（对我来说：Raleway、Verdana 等），下载并安装主题，然后就设置好了。对于 jqmobile，您需要使用您的主题 css、jqm 图标和 jqm 结构代替通常的单个 jqm css。
overriding stuff in css may get you in different trouble with different browsers... And that's NOT the point with jquerymobile.
在 css 中覆盖的东西可能会让你在不同的浏览器中遇到不同的麻烦......这不是 jquerymobile 的重点。
