>웹 프론트엔드 >CSS 튜토리얼 >CSS 속성의 FontVariant 소개 및 예

CSS 속성의 FontVariant 소개 및 예

零下一度
零下一度원래의
2017-06-19 11:17:222290검색

font-variant Property 텍스트를 작은 대문자로 표시하기 위한 글꼴을 설정합니다. 즉, 모든 소문자는 대문자로 변환되지만 작은 대문자를 사용하는 모든 문자는 나머지 텍스트에 비해 글꼴 크기가 더 큽니다.
소문자 값을 설정하면 브라우저에 작은 대문자 글꼴이 표시됩니다.

구문: ​​

font-variant : normal | small-caps

매개변수:
normal: 일반 글꼴
small-caps: 작은 대문자 글꼴
설명:
객체의 텍스트가 작은 대문자인지 설정하거나 검색합니다. 해당 스크립트 기능은 FontVariant입니다. 제가 쓴 다른 책들도 참조해 주세요.

text-transformtext-transform과 글꼴 변형의 차이점

text-transform과 글꼴 변형은 영어 텍스트를 대문자와 소문자로 변환할 수 있습니다. 그러나 글꼴 변형의 유일한 기능은 영어 텍스트를 "작은" 대문자 텍스트로 변환하는 것입니다. 일반적으로 글꼴 변형 속성은 거의 사용되지 않습니다. 영어 대소문자 변환의 경우 글꼴 변형 속성 대신 텍스트 변환 속성을 사용합니다.

글꼴 변형 속성의 인스턴스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-variant 属性示例</title>
<style type="text/css" media="all">
p#small-caps
{
font-variant:small-caps;
}
p#uppercase
{
text-transform:uppercase;
}
</style>
</head>
<body>
<p id="small-caps">The quick brown fox jumps over the lazy dog.</p>
<p id="uppercase">The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

위 내용은 CSS 속성의 FontVariant 소개 및 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.