비표준 글꼴을 웹 사이트에 추가하는 방법은 무엇입니까?

이미지, Flash 또는 다른 그래픽 을 사용하지 않고 웹 사이트에 사용자 정의 글꼴을 추가하는 방법이 있습니까?

예를 들어, 나는 결혼 웹 사이트에서 일하고 있었고 그 주제에 대한 멋진 글꼴을 많이 발견했습니다. 그러나 서버에 해당 글꼴을 추가하는 올바른 방법을 찾을 수 없습니다. CSS와 함께 해당 글꼴을 HTML에 어떻게 포함합니까? 그래픽 없이도 가능합니까?

CSS를 통해 수행 할 수 있습니다.

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

그것은되는 정규 모든 브라우저에서 지원 트루 타입 - 폰트 (TTF) 또는 웹 오픈 폰트 포맷 (WOFF)를 사용합니다.

Google 웹 글꼴을 통해 글꼴을 추가 할 수 있습니다 .

기술적으로 글꼴은 Google에서 호스팅되며 HTML 헤더에서 연결됩니다. 그런 다음 CSS에서 자유롭게 읽을 수 있습니다 @font-face( read about ).

예를 들면 다음과 같습니다.

에서 <head>섹션 :

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

그런 다음 CSS에서 :

h1 { font-family: 'Droid Sans', arial, serif; }

Smashing Magazine 도 기사 제목에이 솔루션을 사용합니다 . 그러나 Google Font Directory 에는 지금까지 사용할 수있는 글꼴이 많지 않습니다 .

저자는 @ font-face CSS 선언을 사용하여 작성자가 온라인 글꼴을 지정하여 웹 페이지에 텍스트를 표시 할 수 있습니다. @ font-face는 작성자가 고유 한 글꼴을 제공 할 수 있도록하여 사용자가 컴퓨터에 설치 한 제한된 수의 글꼴에 의존 할 필요가 없습니다.

다음 표를 살펴보십시오.

당신이 볼 수 있듯이, 당신에 대해 주로 크로스 브라우저 호환성을 알 필요가 있다는 여러 가지 형식이있다. 모바일 장치의 시나리오는 크게 다르지 않습니다.

솔루션 :

1-전체 브라우저 호환성

이것이 지금 가장 깊은 지원을받는 방법입니다.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2-대부분의 브라우저

그래도 상황이 WOFF로 크게 이동 하고 있으므로 다음과 같이 벗어날 수 있습니다.

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3-최신 브라우저 만

아니면 그냥 WOFF.
그런 다음 다음과 같이 사용하십시오.

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

참고 문헌 및 추가 자료 :

이 기능을 구현할 때 주로 알아야 할 사항입니다. 이 주제에 대해 더 많이 연구하고 싶다면 다음 자료를 살펴보십시오. 내가 여기에 넣은 것의 대부분은 다음에서 추출됩니다.

• 서체 사용 (매우 권장)
• 방탄 @ font-face 구문
• @ font-face 웹 글꼴을 사용할 수 있습니까?
• Cross-Browser @ font-face 지원을 아카이브하는 방법
• CSS Mozilla 개발자 네트워크의 @ font-face

비표준 글꼴로 표준 형식의 사용자 정의 글꼴을 의미하는 경우 여기에 내가하는 방법이 있으며 지금까지 확인한 모든 브라우저에서 작동합니다.

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

따라서 ttf 및 eot 글꼴이 모두 필요합니다. 온라인에서 사용 가능한 일부 도구는 변환을 수행 할 수 있습니다.

그러나 비표준 형식 (비트 맵 등)으로 글꼴을 첨부하려면 도울 수 없습니다.

웹 사이트에서 비표준 글꼴을 사용하는 가장 쉬운 방법은 sIFR 을 사용 하는 것입니다.

글꼴이 포함 된 Flash 객체를 사용하지만 Flash가 설치되지 않은 경우 표준 텍스트 / 글꼴로 성능이 저하됩니다.

스타일은 CSS에서 설정되며 JavaScript는 텍스트의 Flash 대체를 설정합니다.

편집 : (sIFR이 프로젝트에 시간을 추가하고 유지 보수가 필요할 수 있으므로 비표준 글꼴에 이미지를 사용하는 것이 좋습니다.)

IE의 글꼴 : 웹 글꼴 만들기 기사 는 세 가지 주요 브라우저 모두에서 작동한다고 말합니다.

여기 내가 일한 샘플이 있습니다 : http://brendanjerwin.com/test_font.html

더 많은 토론은 글꼴 포함에 있습니다.

Typeface.js 와 Cufon 은 또 다른 흥미로운 옵션입니다. Internet Explorer를 제외한 모든 최신 브라우저의 새 <canvas> 요소와 Internet Explorer의 VML 을 통해 JSON 형식의 특수 글꼴 데이터를 웹 사이트의 TrueType 또는 OpenType 형식에서 변환 할 수있는 JavaScript 구성 요소입니다 .

현재와 ​​같이 두 가지의 주요 문제는 텍스트 선택이 작동하지 않거나 최소한 어색하게 작동한다는 것입니다.

여전히 헤드 라인에는 매우 좋습니다. 본문 ... 모르겠어요.

그리고 놀랍게도 빠릅니다.

또는 sIFR을 사용해보십시오 . 플래시를 사용하지만 가능한 경우에만 사용합니다. Flash를 사용할 수없는 경우 원본 텍스트를 원본 (CSS) 글꼴로 표시합니다.

W3C가이를 위해 권장 한 기술을 "임베딩"이라고하며 여기에 포함 된 세 가지 기사에서 설명합니다 . 글꼴 포함 . 제한된 실험 에서이 프로세스가 오류가 발생하기 쉽고 다중 브라우저 환경에서 작동하도록 제한적으로 성공했습니다.

Safari와 Internet Explorer는 모두 CSS @ font-face 규칙을 지원하지만 두 가지 다른 내장 글꼴 유형을 지원합니다. Firefox는 조만간 Apple과 동일한 유형을 지원할 계획입니다. SVG는 글꼴을 포함 할 수 있지만 아직 플러그인없이 널리 지원되지는 않습니다.

내가 본 가장 휴대용 솔루션은 JavaScript 함수를 사용하여 제목 등을 서버에서 생성되고 캐시 된 이미지로 선택한 글꼴로 대체하는 것입니다. 따라서 텍스트를 간단하게 업데이트 할 필요가 없습니다 포토샵에서 주위에 물건.

ASP.NET을 사용하는 경우 다음을 사용하여 서버에 글꼴을 실제로 설치하지 않고도 이미지 기반 글꼴을 쉽게 생성 할 수 있습니다.

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

그런 다음 해당 글꼴로 Graphics.

Internet Explorer에서만 작동하는 것처럼 보이지만 Google에서 "html embed fonts"를 빠르게 검색하면 http://www.spoono.com/html/tutorials/tutorial.php?id=19가 .

플랫폼에 구애받지 않고 그대로 유지하려면 이미지를 사용하거나 표준 글꼴을 사용해야합니다.

나는 약간의 연구를하고 동적 텍스트 대체 (2004-06-15 게시)를 파헤 쳤습니다 .

이 기술은 이미지를 사용하지만 "핸즈프리"인 것 같습니다. 텍스트를 작성하고 몇 개의 자동화 된 스크립트가 페이지에서 자동으로 찾기 및 바꾸기를 수행하도록합니다.

그것은 약간의 한계가 있지만, 내가 본 나머지 모든 것보다 쉬운 선택 (및 더 많은 브라우저 호환 가능) 중 하나 일 것입니다.

WOFF 글꼴을 사용하는 것도 가능합니다 - 예를 들어 여기에

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }

이처럼 실제 글꼴에 대한 링크를 제공하기 만하면됩니다.

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>

Typeface.js JavaScript 방식 :

typeface.js를 사용하면 웹 페이지에 사용자 정의 글꼴을 포함하여 텍스트를 이미지로 렌더링 할 필요가 없습니다.

사이트의 그래픽 텍스트를 원하는 글꼴로 표시하기 위해 이미지를 만들거나 플래시를 사용하는 대신 방문자가 글꼴을 로컬에 설치 한 것처럼 typeface.js를 사용하여 일반 HTML 및 CSS로 작성할 수 있습니다.

http://typeface.neocracy.org/

대체 방법 은 기사 50 아름다운 웹 타이포그래피를 위한 유용한 디자인 도구를 참조하십시오 .

나는 Cufon 만 사용했습니다 . 나는 그것이 믿을 수 있고 사용하기 매우 쉽다는 것을 알았으므로 그것을 고수했습니다.

글꼴 파일이있는 경우 다른 브라우저에서 해당 글꼴의 형식을 추가해야합니다.

이 목적을 위해 Fontsquirrel 과 같은 글꼴 생성기를 사용하여 모든 글꼴 형식과 @ font-face CSS를 제공하므로 CSS 파일로 끌어서 놓기 만하면됩니다.