글꼴 스타일: CSS에서 기울임꼴 대 사선

글꼴 스타일: CSS에서 기울임꼴 대 사선

이 두 가지의 차이점은 무엇입니까?

font-style:italic
font-style:oblique

저는 W3Schools 에디터를 사용해 보았지만 차이점을 구별할 수 없었습니다.

제가 무엇을 빠뜨리고 있나요?

가장 순수한(유형 설계자) 의미에서 사선은 특정 각도(일반적으로 8-12도)로 치우친 로마자 글꼴입니다.기울어진 버전뿐만 아니라 더 많은 캘리그라피를 만들기 위해 특정 문자(특히 소문자 a)를 다르게 그린 이탤릭체가 유형 디자이너에 의해 작성됩니다.

일부 유형의 주조 공장은 설계자가 직접 승인할 필요가 없는 임의의 귀금속을 생성했습니다.)을 생성했습니다.어떤 글꼴은 이탤릭체로 쓰거나 오블리주로 쓰지 않기로 되어 있었습니다.하지만 사람들은 어쨌든 했습니다.아시다시피 일부 운영 체제는 '이탤릭' 아이콘을 클릭하면 글꼴을 왜곡하여 즉시 사선을 만듭니다.기분 좋은 광경이 아닙니다.

글꼴이 기울임꼴로 설계되었는지 확인하는 경우에만 기울임꼴을 지정하는 것이 좋습니다.

일반적으로 이탤릭체는 글꼴의 특별한 버전인 반면, 비스듬한 버전은 약간 기울어진 일반 버전입니다.그래서 둘 다 기울어져 있고 일반 글꼴과 관련이 있지만, 기울임꼴은 그것을 위해 특별히 만들어진 특별한 문자 형태를 가질 것입니다.

대부분의 글꼴은 이탤릭체 또는 사선체 중 하나입니다. 둘 다 있는 글꼴은 본 적이 없습니다. (이탤릭체가 있다면 사선체를 사용할 필요가 있습니까?)

이탤릭체 및 사선체와 마찬가지로 이탤릭체와 가짜 이탤릭체를 비교할 때 동일한 차이가 나타납니다.

일반 글꼴이 다음으로 치우쳐 있는 경우에는 어디서나 가짜 기울임꼴을 볼 수 있습니다.font-style: italic;반면에 진정한 이탤릭체 글꼴은 기울어지도록 설계되었습니다.

두 ll의 하단은 그 차이를 명확하게 보여줍니다.

예제 참조

비스듬한 활자(또는 비스듬한, 경사진)는 오른쪽으로 약간 기울어진 활자의 한 형태로, 기울어진 활자와 같은 방식으로 사용됩니다.그러나, 이탤릭체와는 달리, 이탤릭체는 다른 모양의 글리프를 사용하지 않습니다; 왜곡된 것을 제외하고는 로마자와 같은 글리프를 사용합니다.

추가 판독치: css 글꼴 스타일 사선 대 기울임꼴

모질라 개발자 CSS 튜토리얼에 따르면:

기울임꼴: 사용 가능한 경우 글꼴의 기울임꼴 버전을 사용하도록 텍스트를 설정합니다. 사용할 수 없는 경우 기울임꼴 대신 기울임꼴로 시뮬레이션합니다.

파일: 버전을 글꼴의 합니다.일반 버전을 기울여서 만든 기울임꼴 글꼴의 모의 버전을 사용하도록 텍스트를 설정합니다.

여기서 글꼴의 기울임꼴 버전을 사용할 수 없는 경우 기울임꼴과 기울임꼴이 모두 동일하게 동작한다고 추론합니다.W3Schools 코드 스니펫이 특정 사항을 명시하지 않았기 때문입니다.font-family기본 글꼴이 사용되는 것 같습니다. 기본 글꼴은 아마도 기울임꼴 버전이 없을 것입니다.

하지만 어떻게 하면 이탤릭체의 폰트를 사용할 수 있게 만들 수 있을까요?

즉, 동일한 글꼴, "일반" 글꼴 및 이탤릭체의 두 가지 이상의 버전이 있습니다.은 이한항에 수있니다에서 할 수 .<style>이 @font-face규칙. developer.developer.dll, w3dll, 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이 서로 다른 파일을 가리킵니다.이제 w3schools 코드 조각으로 돌아가서 브라우저가 와 를 구별할 수 있는 방법입니다.

글꼴 파일의 상대 경로 사용: (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 페이지와 동일한 폴더에 저장해야 합니다. 한 번, 다시한번지만리드씀말,▁that▁the만지▁again리▁notice드,,font-family 아요같그똑, 그▁is.font-styleUbuntu-R-webfont 대 Ubuntu-I-webfont의 URL도 다릅니다.

글꼴의 기울임꼴 버전 예:

ctan.org : 동일한 글꼴의 서로 다른 스타일/스타일에 대해 서로 다른 파일이 제공되는 방법의 예입니다.굵게 표시되거나 기울임꼴로 표시되지 않고 특정 파일에서 검색됩니다.

언급URL : https://stackoverflow.com/questions/1680624/font-style-italic-vs-oblique-in-css