글꼴 사용은 웹 디자인의 필수적인 부분입니다. 종종 웹 페이지에서 특정 글꼴을 사용하고 싶지만 해당 글꼴이 주류 운영 체제에 내장된 글꼴이 아니기 때문에 사용자가 페이지를 탐색할 때 실제 디자인을 보지 못할 수도 있습니다. 미술 디자이너가 사용하는 가장 일반적인 방법은 원하는 텍스트를 그림으로 바꾸는 것입니다. 여기에는 몇 가지 명백한 결함이 있습니다. 1. 글꼴을 대규모로 사용할 수 없습니다. 2. 그림의 내용을 비교하기가 쉽지 않습니다. 3. 글꼴을 수정하는 것은 쉽지 않습니다. 웹 사이트 SEO에 도움이 됩니다(주류 검색 엔진은 웹 콘텐츠의 관련성을 판단하는 데 이미지 대체 콘텐츠를 효과적인 요소로 사용하지 않습니다). 인터넷에 sIFR 기술이나 자바스크립트/플래시 해킹 등을 활용한 방법들이 있지만 구현하기 번거롭거나 결함이 있다. 다음으로 이야기할 내용은 CSS의 @font-face 속성을 통해서만 웹 페이지에 글꼴을 삽입하는 방법입니다.

첫 번째 단계

사용할 글꼴의 세 가지 파일 형식을 구하고 해당 글꼴이 주류 브라우저에서 정상적으로 표시되는지 확인합니다.

• Firefox 3.5, Safari, Opera용 .TTF 또는 .OTF
• .EOT, Internet Explorer 4.0 이상용
• Chrome, iPhone용 .SVG

다음으로 해결해야 할 것은 특정 글꼴의 세 가지 형식 파일을 얻는 방법입니다. 일반적으로 우리는 특정 형식의 글꼴 파일을 가지고 있습니다(또는 디자인 리소스 사이트에서 찾았습니다). 가장 일반적인 파일은 .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}

또는

달을 물에 담고 떨어진 꽃향기가 옷에 가득합니다

다음은 위의 두 단계를 통해 수행한 작업의 예입니다.

코드 상자 실행
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<머리>


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;}


<본문>