CSS 글꼴 스타일(Font Style)은 웹 페이지에 없어서는 안될 스타일 속성 중 하나입니다. 글꼴 스타일을 사용하면 웹 페이지가 더욱 아름다워질 수 있으므로 글꼴 스타일 속성은 모든 디자이너 지식의 필수 요소가 되었습니다.
글꼴 이름 속성 설정(font-family)
이 속성 설정 페이지에서 사용할 글꼴을 선택하세요. Simsun , Arial, Verdana, Helvetica, sans-serif 등, 정의 방법:
.ziti {font-family: Simsun,Arial,Verdana;}
3개의 연속 정의 여기에서는 사용자 글꼴에 첫 번째 글꼴이 없으면 두 번째 글꼴이 사용되며, CSS에 설정된 글꼴이 없으면 브라우저의 기본값이 사용됩니다.
글꼴 크기 속성 설정(font-size)
font-size는 페이지의 글꼴 크기를 설정할 수 있습니다. 일반적으로 사용되는 단위는 em, px, pt입니다.
세 가지 길이 단위에 대한 간략한 소개:
px, 상대 길이 단위. 픽셀.
em, 상대 길이 단위입니다. 현재 개체 내의 텍스트를 기준으로 한 글꼴 크기입니다.
pt, 절대 길이 단위. 가리키다.
가장 일반적으로 사용되는 것은 px입니다. 글꼴 설정 방법은 다음과 같습니다.
.ziti {font-size:12px;}
글꼴 스타일 속성 설정(font-style)
글꼴 스타일은 글꼴이 이탤릭체인지 여부를 설정하는 속성으로 총 3가지 값이 있습니다.
normal, italic, oblique 및 Normal이 기본값이며, italic 및 oblique는 기울임꼴로 표시됩니다. 예:
.ziti {font-style:italic;}
글꼴 굵기(thickness) 속성 설정(font-weight)
글꼴의 굵기(thickness) 속성은 2개뿐입니다. , 왜냐하면 굵은 글씨와 굵은 글씨 아닌 두 가지 유형만 있기 때문입니다. 그 값은 보통과 굵은 글씨이며, 기본값은 보통입니다. 예:
.ziti {font-weight:bold;}
글꼴 변수 속성 설정(font-variant)
font-variant는 영문자에만 적용되며 한자에는 영향을 주지 않습니다. 소문자로 표시되는 글꼴을 정의합니다. 소문자는 대문자이지만 텍스트 크기는 소문자와 동일하므로 직접 입력한 대문자보다 작습니다. 편지.
Font-variant에는 일반 대문자와 작은 대문자의 두 가지 값이 있습니다. Normal은 기본값으로, 일반 글꼴입니다. small-caps는 소문자를 대문자로 변환합니다. 예:
.ziti {font-variant:small-caps;}
글꼴 속성(글꼴)
글꼴은 위의 5가지 속성을 글꼴 속성에서 종합적으로 정의할 수 있는 단축 방법으로, 글꼴 속성을 한 줄로 정의할 수 있다. 쓰기 순서는 글꼴 글꼴 -스타일 글꼴-변형 글꼴-가중 글꼴-크기 글꼴-군입니다. 예:
.ziti {font:italic Normal Bold 18px arial;}
속성에 기본값이 있는 경우 해당 속성을 생략할 수 있으며 시스템은 이를 자동으로 기본값으로 구문 분석합니다.
글꼴 색상(color)
글꼴 색상은 CSS 텍스트 속성의 내용에 속하며, 글꼴과는 다릅니다. 속성의 경우 색상 전에 글꼴을 추가해야 하며 색상만 정의할 수 있습니다.
.ziti {글꼴: 기울임꼴 보통 굵은 18px arial;색상:빨간색;}
ems를 사용하여 글꼴 크기 설정
Internet Explorer에서 텍스트 크기를 조정할 수 없는 문제를 피하기 위해 많은 개발자는 픽셀 대신 em 단위를 사용합니다.
W3C에서는 em 크기 단위를 권장합니다.
1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16px입니다.
따라서 1em의 기본 크기는 16px입니다. 다음 공식을 사용하여 픽셀을 em으로 변환할 수 있습니다: px/16=em
예
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
해 보세요
위 예에서 em 텍스트 크기는 이전 예의 픽셀과 동일합니다. 그러나 em 단위를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.
아쉽게도 여전히 IE 문제입니다. 텍스트 크기를 조정하면 평소보다 크거나 작게 표시됩니다.
백분율을 사용하여 글꼴 크기를 조정할 수도 있습니다: body {font-size:100%;}
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font属性</title>
</head>
<style type="text/css">
p#pmin
{
font:1em Arial;
}
p#pall
{
font:italic small-caps bold 12px/1.2em Arial;
}
p#p2
{
font:italic 18px/1.5em "宋体",Arial,sans-serif;
}
</style>
</head>
<body>
<p id="pmin">font值最小的形式,定义段落的字体为1倍字体大小(font-size属性),Arial字体(font-family属性).</p>
<p id="pall">定义段落的字体为斜体(font-style属性),小型的大写字母(font-variant属性),粗体(font-weight属性),12px字体大小(font-size属性),1.2倍(字体)的行高(line-height属性),Arial字体(font-family属性).</p>
<p id="p2">字体属性演示</p>
</body>
</html>
다음 섹션