0

@fontface を使用して、Jquery UI で使用される font-family を Web フォントに変更したいと考えています。my.cssという名前の独自の css ファイルを作成し、次のCSS を指定しました。

@font-face {
    font-family: "Conv_mry_KacstQurn";
    src: url('fonts/mry_KacstQurn.eot#iefix') format('embedded-opentype'),
    url('fonts/mry_KacstQurn.woff') format('woff'), url('fonts/mry_KacstQurn.ttf') format('truetype'), url('fonts/mry_KacstQurn.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

body *{
font-family: "Conv_mry_KacstQurn";
}

私のページヘッダーセクションのコードは次のとおりです。

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>jQuery UI Example Page</title>
<link type="text/css" href="css/my.css" rel="stylesheet" />
        <link type="text/css" href="css/custom-theme/jquery-ui-1.8.22.custom.css" rel="stylesheet" />

        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

        <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>


        <script type="text/javascript">
/* initiation of UI code */
</script>
<style type="text/css">
            /*demo page css*/
            body{ font: 62.5% "Conv_mry_KacstQurn", sans-serif; margin: 50px;}
            .demoHeaders { margin-top: 2em; }
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
            ul#icons {margin: 0; padding: 0;}
            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
            ul#icons span.ui-icon {float: left; margin: 0 4px;}
        </style>
    </head>

my.css で body * を使用するとすべてがうまくいき、Jquery UI 要素でも Web フォントがレンダリングされます。問題は、ページで複数のフォント ファミリを使用する場合です。body *セレクターを使用せずにJquery UI要素で使用するWebフォントを設定する方法を知りたいですか?

4

1 に答える 1

0

すべての視聴者に感謝します、私は答えを見つけました。簡単に言うと、リンクされている2つのcssファイルの順序を次のように置き換える必要があります。

     <link type="text/css" href="css/custom-theme/jquery-ui-1.8.22.custom.css" rel="stylesheet" />

<link type="text/css" href="css/my.css" rel="stylesheet" />

次に、次のCSSルールをcss / custom-theme / jquery-ui-1.8.22.custom.cssからコピーし、そこにあるfont-familyプロパティに必要なfont-familyを追加してmy.cssに貼り付けます。

 * Component containers
    ----------------------------------*/
    .ui-widget { font-family: "Conv_mry_KacstQurn",Verdana,Arial,sans-serif; font-size: 1.1em; }
    .ui-widget .ui-widget { font-size: 1em; }
    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: "Conv_mry_KacstQurn",Verdana,Arial,sans-serif; font-size: 1em; }
    .ui-widget-content { border: 1px solid #a6c9e2; background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; }
    .ui-widget-content a { color: #222222; }
    .ui-widget-header { border: 1px solid #4297d7; background: #2191c0 url(images/ui-bg_highlight-hard_75_2191c0_1x100.png) 50% 50% repeat-x; color: #eaf5f7; font-weight: bold; }
    .ui-widget-header a { color: #eaf5f7; }

これですべてです。これで、すべてのJquery要素に必要なフォントファミリーが追加されました。

于 2012-08-06T23:01:03.097 に答える