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 ファイル内に CSSyour_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.htmljQuery Mobile への参照の後に、CSS ファイルを HTML ファイルに含めます。

例：

<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 に答える