0

我一直在使用 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>
4

1 回答 1

0

尝试以下操作：

将您的 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";
}

your_html.html在您对 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
于 2012-10-04T03:13:10.003 回答