Fatal编程技术网
  • html/
  • Html 使用@fontface更改Jquery UI字体

Html 使用@fontface更改Jquery UI字体

html css jquery-ui fonts

Html 使用@fontface更改Jquery UI字体,html,css,jquery-ui,fonts,font-face,Html,Css,Jquery Ui,Fonts,Font Face,我想使用@fontface将Jquery UI使用的字体系列更改为web字体。我创建了自己的css文件，名为my.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'),

我想使用@fontface将Jquery UI使用的字体系列更改为web字体。我创建了自己的css文件，名为my.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>


jQueryUI示例页面
/*启动用户界面代码*/
/*演示页面css*/
正文{字体：62.5%“Conv_mry_KacstQurn”，无衬线；边距：50px；}
.demoHeaders{页边距顶端：2em；}
#对话框链接{填充：.4em 1em.4em 20px；文本装饰：无；位置：相对；}
#对话框链接span.ui-图标{页边距：0 5px 0；位置：绝对；左侧：.2em；顶部：50%；页边距顶部：-8px；}
ul#图标{边距：0；填充：0；}
ul#图标li{边距：2px；位置：相对；填充：4px 0；光标：指针；浮点：左；列表样式：无；}
ul#icons span.ui-icon{float:left；margin:04px；}
在my.css中使用body*可以使一切正常，并且web字体也可以在Jquery UI元素中呈现问题是当我想在页面中使用多个字体系列时。因此，我想知道如何在不使用body*selector的情况下将web字体设置为与Jquery UI元素一起使用？

感谢所有观众，我已经找到了答案。简单地说，它包括替换两个链接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" />
就这些，现在所有Jquery元素都有我想要的字体系列

 * 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; }