글꼴 사용은 웹 디자인의 필수적인 부분입니다. 종종 웹 페이지에서 특정 글꼴을 사용하고 싶지만 해당 글꼴이 주류 운영 체제에 내장된 글꼴이 아니기 때문에 사용자가 페이지를 탐색할 때 실제 디자인을 보지 못할 수도 있습니다. 미술 디자이너가 사용하는 가장 일반적인 방법은 원하는 텍스트를 그림으로 바꾸는 것입니다. 여기에는 몇 가지 명백한 결함이 있습니다. 1. 글꼴을 대규모로 사용할 수 없습니다. 2. 그림의 내용을 비교하기가 쉽지 않습니다. 3. 글꼴을 수정하는 것은 쉽지 않습니다. 웹 사이트 SEO에 도움이 됩니다(주류 검색 엔진은 웹 콘텐츠의 관련성을 판단하는 데 이미지 대체 콘텐츠를 효과적인 요소로 사용하지 않습니다). 인터넷에 sIFR 기술이나 자바스크립트/플래시 해킹 등을 활용한 방법들이 있지만 구현하기 번거롭거나 결함이 있다. 다음으로 이야기할 내용은 CSS의 @font-face 속성을 통해서만 웹 페이지에 글꼴을 삽입하는 방법입니다.
첫 번째 단계
사용할 글꼴의 세 가지 파일 형식을 구하고 해당 글꼴이 주류 브라우저에서 정상적으로 표시되는지 확인합니다.
다음으로 해결해야 할 것은 특정 글꼴의 세 가지 형식 파일을 얻는 방법입니다. 일반적으로 우리는 특정 형식의 글꼴 파일을 가지고 있습니다(또는 디자인 리소스 사이트에서 찾았습니다). 가장 일반적인 파일은 .TTF 파일이며 이 파일 형식을 다른 두 파일 형식으로 변환해야 합니다. 글꼴 파일 형식 변환은 FontsQuirrel 웹사이트나 onlinefontconverter에서 제공하는 온라인 글꼴 변환 서비스를 통해 얻을 수 있습니다. 여기에서는 글꼴 파일을 생성하는 데 필요한 문자를 선택할 수 있는 첫 번째 사이트를 권장합니다(서비스의 마지막 옵션). 이는 글꼴 파일의 크기를 크게 줄이고 이 솔루션을 더욱 실용적으로 만듭니다.
2단계
세 가지 형식의 글꼴 파일을 얻은 후 다음 단계는 스타일 시트에서 글꼴을 선언하고 필요한 곳에 글꼴을 사용하는 것입니다.
글꼴 선언은 다음과 같습니다.
@글꼴-얼굴 {
글꼴 계열: 'fontNameRegular';
src: url('fontName.eot');
src: local('글꼴 이름 일반'),
local('글꼴이름'),
url('fontName.woff') 형식('woff'),
url('fontName.ttf') 형식('truetype'),
url('글꼴이름.svg#글꼴이름') format('svg');
}
/*fontName을 글꼴 이름으로 바꾸세요*/
페이지에서 필요한 곳에 글꼴을 사용하십시오.
p { 글꼴: 13px 글꼴 이름Regular, Arial, sans-serif }
h1{글꼴 계열: FontNameRegular}
또는
<p style="font-family:fontNameRegular">달을 물에 담고 떨어진 꽃향기가 옷에 가득합니다</p>
다음은 위의 두 단계를 통해 수행한 작업의 예입니다.
코드 상자 실행
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹페이지에 모든 글꼴을 삽입하기 위한 완벽한 솔루션 - CSS9.NET</title>
<link rel="stylesheet" href=" http://www.blueidea.com/articleimg/2009/12/7263/style.css " />
<스타일 유형="텍스트/css">
@글꼴-얼굴 {
글꼴 계열: 'hakuyoxingshu7000Regular';
src: url('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');
src: local('hakuyoxingshu7000 Regular'), local('hakuyoxingshu7000'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') 형식('truetype'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') format('svg');
}
#시{
글꼴 크기:45px;
글꼴 계열:hakuyoxingshu7000Regular;
텍스트 정렬:가운데;
}
#시 p{높이:30px;줄 높이:30px;}
</style>
</head>
<본문>
<div id="테스트div">
<h1>웹페이지에 모든 글꼴을 삽입하기 위한 완벽한 솔루션 - CSS9.NET</h1>
<h2>원문을 확인하세요: <a href=" http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a >  ;   ;웹 프런트엔드 개발에 집중 - <a href=" http://css9.net">CSS9.NET</a></h2 >
<div id="시">
<h3>윤웨이는 채식주의자입니다</h3>
<p>베이징에 동급생이 있는데 채식 식당에서 만났습니다. </p><p>청취자들의 말이 아직 끝나지 않았는데, 발표자들의 말이 너무 많아졌다. </p><p>집 안은 친구들로 가득 차 있었고, 허밍커에 대해 자유롭게 이야기를 나눴다. </p><p>선으로 작은 말을 보내고, 조심스럽고 부드럽게 말하세요. </p>
</div>
</body>
</html>
[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]
위 글의 글꼴은 이전에 본 블로그에 공개된 펜 필기체 글꼴을 사용하고 있으며 마음에 드시면 다운로드 받으실 수 있습니다.
이 예제의 소스 코드를 다운로드하세요: 웹 삽입 글꼴 예제