font-style 사용 CSS 속성을 사용하면 텍스트를 강조하기 위해 일련의 특성으로 글꼴의 스타일을 지정할 수 있습니다.
언제나처럼 내 Codepen을 확인하여 나와 함께 코드를 작성할 수 있습니다.
글꼴 스타일 구문 및 옵션
font-style을 사용할 때 다음과 같은 옵션이 있습니다. . 참고로 모두 키워드로 지정됩니다.
font-style: normal; font-style: italic; font-style: oblique 30deg; font-style: oblique;
Font-style은 몇 가지 일반적인 전역 스타일 키워드도 지원합니다.
/* inherit from parent element */ font-style: inherit; /* browser's default */ font-style: initial; /* inherit if parent value, else initial */ font-style: unset;
일반은 지정된 font-family 내의 일반 글꼴과 관련됩니다. .
oblique를 사용하면 선택적으로 각도(-90 ~ 90)를 지정할 수 있으며 각도를 지정하지 않으면 기본값은 14입니다.
기울임꼴과 기울임꼴은 서로 바꿔 사용할 수 있습니다. . 이는 브라우저 지원 때문입니다. 특수 글꼴을 사용 중이고 브라우저가 사선을 찾거나 지원하지 않는 경우 기울임꼴 등을 사용합니다.
oblique를 사용하기 전에 , 귀하의 브라우저에서 oblique 키워드가 완전히 지원되는지 확인하십시오.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
이를 염두에 두고 h1 제목을 강조해 보겠습니다.
h1.title {
font-family: 'Tangerine';
font-style: normal;
} Google 글꼴에서 Tangerine 글꼴을 가져온 방법을 알 수 있습니다. 이 글꼴의 일반 스타일은 필기체이므로 그대로 표시됩니다.
이 특정 글꼴의 경우 필기체로 만들면 더 기울어지므로 적용하고 싶지 않을 것입니다.
주요 용도 글꼴 스타일
대부분의 경우 normal 키워드를 사용하는 것은 중복됩니다. 따라서 font-style의 주요 용도는 속성은 강조를 추가하기 위해 글꼴을 기울임꼴로 만드는 것입니다.
단락에 강조를 더하기 위해 그 중 하나를 기울임꼴로 만들어 보겠습니다.
p.par {
font-family: 'Indie Flower';
font-style: italic;
} Indie Flower 글꼴을 확인하면 일반(일반) 스타일만 있음을 알 수 있습니다. 이 경우 브라우저 자체가 경사 효과를 내고 있습니다!
결론
font-style 사용 속성은 font-family와 깊이 연결되어 있습니다. . 또한 oblique에 대한 더 나은 브라우저 지원이 있을 때까지 키워드에서 이 속성의 주요 용도는 글꼴을 기울임꼴로 만들어 강조를 추가하는 것입니다.