@ font-face CSS 규칙에서 font-family를 올바르게 정의하고 있습니다.

저는 최근 내 웹 사이트에서 웹 글꼴을 사용하려고 할 때 @font-family CSS 규칙을 발견했습니다. 지점으로 오는@ font-face CSS 규칙에서 font-family를 올바르게 정의하고 있습니다.

는

, 당신이 아래에 볼 수 있습니다 @ 글꼴 - 가족 CSS 코드의 두 가지 변종, 본 적이 :

@font-face { 
    font-family: 'Droid Serif'; /* NOTE THIS LINE */ 
    font-weight: normal; /* NOTE THIS LINE */ 
    font-style: normal; /* NOTE THIS LINE */ 
    src: url('DroidSerif-Regular-webfont.eot'); 
    src: url('DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), 
    local('Droid Serif'), local('DroidSerifRegular'), 
    url('DroidSerif-Regular-webfont.woff') format('woff'), 
    url('DroidSerif-Regular-webfont.ttf') format('truetype'), 
    url('DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg'); 
} 

@font-face { 
    font-family: 'Droid Serif'; /* NOTE THIS LINE */ 
    font-weight: normal; /* NOTE THIS LINE */ 
    font-style: italic; /* NOTE THIS LINE */ 
    src: url('DroidSerif-Italic-webfont.eot'); 
    src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), 
    local('Droid Serif'), local('DroidSerifItalic'), 
    url('DroidSerif-Italic-webfont.woff') format('woff'), 
    url('DroidSerif-Italic-webfont.ttf') format('truetype'), 
    url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg'); 
}

을 그리고 이것은 또 다른입니다 :

@font-face { 
    font-family: 'DroidSerifRegular'; /* NOTE THIS LINE */ 
    font-weight: normal; /* NOTE THIS LINE */ 
    font-style: normal; /* NOTE THIS LINE */ 
    src: url('DroidSerif-Italic-webfont.eot'); 
    src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), 
    local('Droid Serif'), local('DroidSerifItalic'), 
    url('DroidSerif-Italic-webfont.woff') format('woff'), 
    url('DroidSerif-Italic-webfont.ttf') format('truetype'), 
    url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg'); 
} 

@font-face { 
    font-family: 'DroidSerifItalic'; /* NOTE THIS LINE */ 
    font-weight: normal; /* NOTE THIS LINE */ 
    font-style: normal; /* NOTE THIS LINE */ 
    src: url('DroidSerif-Italic-webfont.eot'); 
    src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), 
    local('Droid Serif'), local('DroidSerifItalic'), 
    url('DroidSerif-Italic-webfont.woff') format('woff'), 
    url('DroidSerif-Italic-webfont.ttf') format('truetype'), 
    url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg'); 
}

이 비교 내가 코멘트 한 행 /* NOTE THIS LINE */

첫 번째 변형은 Google Web Fonts이고 두 번째 변형은 Font Squirrel입니다. 그래서,이 두 가지 중 하나가 잘못 되었습니까? (단지 신뢰할 수있는 출처 임에도 불구하고 확인하고 싶었습니다.)

두 가지 중 어느 쪽이 좋을까요?

출처

2012-04-28 its_me

나는'font-family' 속성에서 폰트 스타일을 절대로 지정해서는 안된다는 것을 배웠다. 그러나 그때, 내 지식이 시대에 뒤 떨어진 것일 수 있습니다. –

첫 번째 예제는 믿기는 어렵지만 정확합니다. Droid Serif Regular가 폰트 가중치 일반 및 폰트 스타일 보통으로 선언되는 방식에 주목하십시오 ... 일반 폰트가 어떻게 표시 될 것으로 기대하십니까? 두 번째 선언은 Droid Serif Italic을 호출하고 font-style : italic으로 설정합니다. 이렇게하면 한 패밀리 내에서 여러 글꼴을 사용할 수 있습니다. 굵은 글꼴을 추가하고 싶다면 font-style : normal을 그대로두고 같은 글꼴 군을 선언하면서 굵은 글꼴 : 굵은 글꼴을 변경하는 것을 제외하고는 동일한 @ font-face 규칙을 적용합니다.

fontsquirrel은 실제로 @ font-face 규칙을 렌더링하는 데 큰 도움이됩니다. 실제로이 기술에 대해 읽었습니다. 놀랍지 만 구현되지 않았습니다. 당신은 이것에 대해 더 많은 것을 읽을 수있다 : http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

출처

2012-04-28 15:45:58 albert

-2

Google 웹 글꼴의 옵션을 사용하여 @import 옵션을 사용합니다. 로드하는 데 약간의 시간이 걸릴 수 있지만, 원하는대로 작동하는 경우 글꼴을 직접 호스팅 할 수 있습니다. 글꼴 다람쥐에 관해서는 나는 그것에 익숙하지 않다. 그러나 나는 그것을 조사 할 것이다.

출처

2012-04-28 15:20:51 PacoDev

@ font-face CSS 규칙에서 font-family를 올바르게 정의하고 있습니다.

답변

관련 문제