Question

我一直在使用jquerymobile来构建某个应用程序，我必须在内容中使用多种字体... Roboto Black用于UI这样

@font-face {
        font-family: 'Roboto-Black';
        src: url('css/fonts/Roboto-Black.ttf');
        }

body  * {
         font-family: "Roboto-Black" !important;
         color:rgba(255,255,255,1);
         font-size:12px;
         }

并且工作得很好，但是在一些页面内容中我有一些使用多种字体格式化的大文本，我已经为div创建了css规则，其中是文本，但它不起作用

css规则：

p.basic-paragraph {
                    font-family: "Minion Pro";
                    font-weight: normal;
                    font-style: normal;
                    font-size: 1em;
                    text-decoration: none;
                    font-variant: normal;
                    text-indent: 0em;
                    text-align: left;
                    color: #FFFFFF;
                    margin: 0em;
            }
span.no-style-override-2 {
                font-family: Roboto-Light;
                src: url('css/fonts/Roboto-Light.ttf');
            }

和页面内容html：

<p class="basic-paragraph basic-paragraph-override"><span class="no-style-override-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>

Answer 1

尝试以下方法：

将CSS放入CSS文件your_css.css中，并确保在以前定义字体：

@font-face {
    font-family: 'Roboto-Black';
    src: url('./fonts/Roboto-Black.ttf');
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('./fonts/Roboto-Light.ttf');
}

p.basic-paragraph {
    font-family: "Minion Pro";
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    text-decoration: none;
    font-variant: normal;
    text-indent: 0em;
    text-align: left;
    color: #FFFFFF;
    margin: 0em;
}

span.no-style-override-2 {
    font-family: "Roboto-Light";
}

在您引用jQuery Mobile之后，在您的HTML文件your_html.html中包含您的CSS文件。

示例：

<html> <head> <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <link rel="stylesheet" href="./css/test.css" /> </head> <body>  <div id="page_1" data-role="page"> <div data-role="content"> <p class="basic-paragraph basic-paragraph-override"><span class="no-style-override-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p> </div> </div> </body> </html>

PS：请注意CSS文件中字体的路径。上面的示例考虑以下目录结构：

your_html.html

的 CSS

your_css.css

的字体

Roboto-Black.ttf

Roboto-Light.ttf

jquerymobile页面内容字体不起作用

1 个答案: