JQuery Mobile - 覆蓋全身的字體家庭主題

我最近添加了jQuery手機到我的網站。JQuery Mobile - 覆蓋全身的字體家庭主題

但是，jQuery主題打破了我以前的字體。雖然我的大部分頁面都很好用，尤其是漂亮的jQuery Mobile滑塊，但我卻遇到了字體問題。

我有自定義字體集，他們工作正常，沒有jQuery的移動CSS。但是，一旦我包含jquery mobile css，它將覆蓋我的字體。

我已經嘗試添加數據角色=「無」的主體和申報單，但沒有幫助。

我也嘗試添加data-theme =「none」，但這也沒有幫助。

有沒有辦法在我的頁面主體上禁用jQuery自定義字體家族主題？

感謝您的幫助。

來源

2012-02-22 AlexIIP

這是我用的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; 
    }

如果以上不夠，您可能還必須針對特定元素。我還必須包括以下內容：

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

我希望你來對。祝你好運。

來源

2012-02-23 10:52:24

從我的理解來看...... jQuery手機可能會將自己的css字體發送到您的組合中。如果你有字體設置CSS文件：

加入嘗試一些測試你的字體樣式很重要！

希望這將幫助你找出一個解決方案:)

來源

2012-02-22 22:12:29 dav

增加重要可能會導致一些長期的討厭影響，我會去實際找到哪些選擇器應用字體和使用css的級聯部分來覆蓋它們。 – agrublev 2012-02-22 22:14:31

檢查的頁面，這是我看到我的元素：FONT-FAMILY：黑體，宋體，無襯線; .ui-body-c，.ui-body -c輸入，.ui-body-c select，.ui-body -c textarea，.ui-body-c button - Helvetica，Arial，sans-serif – AlexIIP 2012-02-22 22:23:36

因此，它似乎是一個.ui-body-c問題？我需要在我的CSS中覆蓋這個嗎？對不起，我沒有很多與CSS的經驗，所以我很抱歉，如果我失去了明顯的東西。 – AlexIIP 2012-02-22 22:25:50

我會檢查元素，並找出究竟在何處被例如指定的字體我剛剛發現該字體此處指定：

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

所以，你可以通過指定相同的選擇，並提出自己的字體:)

來源

2012-02-22 22:13:18 agrublev

這很好，我發現問題在哪裏。由於我不是一個CSS專業版，我想覆蓋以下，這是一個正確的CSS樣本？的.ui體-C，的.ui-dialog.ui疊加-C { { \t文字陰影：0pt 0像素0pt RGB（0，0，0）; } – AlexIIP 2012-02-22 22:39:20

//這是用來覆蓋jQuery Mobile主題 .ui-body -c，.ui-dialog.ui-overlay -c { \t text-shadow：0pt 0px 0pt rgb（0，0，0）; } .ui-body-c，.ui-body -c輸入，.ui-body -c select，.ui-body -c textarea，.ui-body-c按鈕 \t font-family：Helvetica ，Arial，sans-serif，Verdana; \t font-size：12px; } – AlexIIP 2012-02-22 22:56:48

感謝幫助通過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; 
}

來源

2012-02-24 17:41:50 AlexIIP