2012-08-06 4 views
0

@fontface를 사용하여 Jquery UI에서 사용하는 글꼴 패밀리를 웹 글꼴로 변경하고 싶습니다. 나는 my.css라는 내 자신의 CSS 파일을 생성하고 난 때라도 CSS와 함께 제공 :@fontface로 Jquery UI 글꼴을 변경하십시오.

@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 요소에서 렌더링됩니다. 문제는 페이지에서 여러 글꼴 모음을 사용하려는 경우입니다. 그래서 body * selector를 사용하지 않고 Jquery UI 요소와 함께 사용할 웹 글꼴을 설정하는 방법을 알고 싶습니다.

답변

0

모든 뷰어를 이용해 주셔서 감사합니다. 답변을 찾았습니다.

 <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/맞춤 테마/JQuery와 - UI-1.8.22.custom.css과의 때라도 CSS 규칙을 복사 : 간단히, 그것은 두 개의 링크 된 CSS 파일의 순서로 교체 포함 내가 거기에있는 글꼴 - 가족의 특성에 원하는 글꼴 - 가족을 추가하는 my.css에서 그들을 붙여 넣기 : 모든, 그리고 이제 모든 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; } 

합니다.

관련 문제