웹 페이지에 배치된 글자의 간격을 세밀하게 조절하려면 font-kerning 속성을 사용하면 됩니다. 이 속성은 글꼴 파일에 포함된 커닝(kerning) 정보를 활용하여 특정 문자 쌍 사이의 간격을 자동으로 조정해 주므로, 텍스트가 더욱 균형 잡히고 가독성 높게 표시됩니다.
font-kerning 속성의 주요 값
- auto – 브라우저가 상황에 맞게 커닝 적용 여부를 스스로 결정합니다. (기본값)
- normal – 글꼴에 내장된 커닝 정보를 정상적으로 적용합니다.
- none – 커닝을 비활성화하여 모든 문자를 동일한 간격으로 배치합니다.
예제
다음 코드를 실행하여 font-kerning 속성이 실제로 어떻게 작동하는지 직접 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
font-kerning: normal;
}
</style>
</head>
<body>
<div id = "demo">This is demo text.</div>
</body>
</html>위 예제에서는 #demo 선택자에 font-kerning: normal;을 지정하여 해당 요소의 텍스트에 커닝이 적용되도록 설정했습니다. 값을 none으로 바꾸면 커닝이 해제되어 문자 간격이 달라지는 것을 비교해 볼 수 있습니다.