[css] 글꼴 스타일 : CSS의 기울임 꼴 vs 경사

Program / 글쓴이

이 둘의 차이점은 무엇입니까?

font-style:italic
font-style:oblique

W3Schools 편집기를 사용해 보았지만 차이점을 알 수 없었습니다.

내가 무엇을 놓치고 있습니까?

답변

가장 순수한 (유형 디자이너) 의미에서 오블 리크는 로마자 글꼴로 특정 수의 각도 (일반적으로 8-12도)로 기울어졌습니다. 기울임 꼴 버전뿐만 아니라 더 붓글씨를 만들기 위해 특정 문자 (특히 소문자 a)를 다르게 그려서 유형 디자이너가 기울임 꼴을 만듭니다.

일부 유형의 파운드리에서는 디자이너 스스로 승인하지 않아도되는 경사를 임의로 만들었습니다. 아시다시피 일부 운영 체제는 ‘italic’아이콘을 클릭하면 글꼴을 기울이고 비스듬하게 만듭니다. 즐거운 광경이 아닙니다.

글꼴이 글꼴로 디자인 된 경우에만 기울임 꼴을 지정하는 것이 가장 좋습니다.

답변

기울임 꼴은 글꼴의 특수 버전 인 반면 기울임 꼴은 약간 기울어 진 일반 버전입니다. 따라서 둘 다 기울어지고 일반 글꼴과 관련이 있지만 기울임 꼴에는 특별한 글꼴 양식이 있습니다.

대부분의 글꼴에는 기울임 꼴 또는 비스듬한 버전이 있습니다. 나는 둘 다 가진 것을 본 적이 없다. (이탤릭체 버전 인 경우 왜 비스듬한 버전을 사용합니까?)

답변

비스듬한 유형 (또는 기울어 진, 기울어 진)은 기울임 꼴 유형과 동일한 방식으로 사용되며 약간 오른쪽으로 기울어 진 유형입니다. 그러나 기울임 꼴 유형과 달리 다른 글리프 모양을 사용하지 않습니다. 왜곡 된 것을 제외하고 로마자 유형과 동일한 글리프를 사용합니다.

추가 읽기 :
CSS 글꼴 스타일 경사 대 기울임 꼴

답변

와 같이 기울임 및 경사 비교할 때, 동일한 차이는 볼 이탤릭체 로 인조 기울임 .

일반 글꼴이 기울어 진 곳에서는 가짜 이탤릭체 를 볼 수 있지만 실제 기울임 꼴 글꼴은 기울어 지도록 설계되었습니다.font-style: italic;

여기에 이미지 설명을 입력하십시오

두 ll 의 하단 에는 차이점이 명확하게 표시됩니다.

예 참조

답변

mozilla 개발자 CSS 튜토리얼 에 따르면 :

  • 기울임 꼴 : 사용 가능한 경우 글꼴의 기울임 꼴 버전 을 사용 하도록 텍스트를 설정합니다 . 사용할 수없는 경우 대신 경사로 기울임 꼴을 시뮬레이션합니다.
  • 오블 리크 : 일반 버전을 기울여 만든 이탤릭체 글꼴의 시뮬레이션 버전을 사용하도록 텍스트를 설정합니다.

    • 여기에서, 우리는 추론이 글꼴의 기울임 꼴 버전을 사용할 수없는 경우 , 모두 기울임 꼴 및 경 같은 방식으로 작동합니다. W3Schools 코드 스 니펫은 특정을 지정하지 않기 때문에 font-family기본 글꼴이 사용됩니다. 기울임 꼴 버전이없는 기본 글꼴

    그러나 기울임 꼴 버전의 글꼴을 사용 가능하게 만드는 방법은 무엇입니까?

    즉, 동일한 글꼴의 두 가지 버전, 즉 “일반”글꼴과 이탤릭 글꼴이 있습니다. 이들은 규칙 <style>섹션 에서 지정할 수 있습니다 @font-face. 간단히 읽으십시오 : developer.mozilla , w3schools , tympanus.net . 보시다시피, 글꼴은 파일로로드되며 다음 확장자를 가질 수 있습니다 eot, otf, woff, truetype.

    지금까지 글꼴 파일을 연결하는 두 가지 방법을 찾았습니다.

  • 글꼴 파일의 절대 URL : ( tympanus.net의 코드 스 니펫 ) 

    `@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'),
 url (http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

 @font-face {
 font-family: 'Open Sans';
 font-style: italic;
 font-weight: 400;
 src: local('Open Sans Italic'), local('OpenSans-Italic'),
 url
 (http://themes.googleusercontent.com/static/fonts/opensans/v8/
 xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff)
 format('woff');
 }`

    두 경우 모두 font-family: 'Open Sans'기본적으로 동일한 글꼴을 정의합니다. 그러나 첫 번째 경우에는 우리가 font-style: normal;있고 두 번째 경우에는 우리가 있습니다 font-style: italic;. 또한 URL은 다른 파일을 가리 킵니다. 이제, 브라우저를 구별 할 수있는 방법 년대 W3 스쿨의 코드에가는 다시, font-style: normal그리고font-style: italic

  • 글꼴 파일의 상대 경로 사용 : ( metaltoad.com의 코드 스 니펫 )

    각 글꼴에 대해 별도의 글꼴 모음 값을 정의하는 대신 각 글꼴에 동일한 글꼴 모음 이름을 사용하고 다음과 같이 일치하는 스타일을 정의 할 수 있습니다.

    `@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}`

    이 경우 .eot파일은 html 페이지와 동일한 폴더에 저장해야합니다. 다시 말하지만,이 통지하는 font-family동일의는 font-style다른, 또한 URL이 다른 : Ubuntu- R -webfont 대 Ubuntu- I의 -webfont.

    기울임 꼴 글꼴 예 :

    ctan.org : 이것은 같은 폰트의 다른 스타일 / 무게에 대해 다른 파일이 어떻게 제공되는지의 예입니다. 굵은 체나 이탤릭체는 그 자리에서 계산되지 않으며 특정 파일에서 검색됩니다.

    • 답변