Css jquerymobile页面内容字体不工作_Css_Jquery Mobile

Css jquerymobile页面内容字体不工作

css jquery-mobile

Css jquerymobile页面内容字体不工作,css,jquery-mobile,Css,Jquery Mobile,我一直在与jquerymobile合作开发某些应用程序，但我必须在内容中使用几种字体。。。Roboto Black用于UI，如下所示 @font-face { font-family: 'Roboto-Black'; src: url('css/fonts/Roboto-Black.ttf'); } body * { font-family: "Roboto-Black" !important; color:

我一直在与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>

知识产权保护，知识产权保护，知识产权保护，劳动和财产权利的临时保护。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

尝试以下操作：

将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文件中包含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>
        <!-- PAGE 1 -->
        <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


我的应用程序中的所有文本都是roboto black，其中一部分需要是roboto light，我为这些部分制定了css规则