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

518

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

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

html  css  fonts  font-face 
— Vaske
소스
18
이 질문이 제기 된 이후 @font-face훨씬 더 널리 지원되어 일반적인 사용을 권장합니다. IE는 다른 브라우저와 다른 형식의 글꼴이 필요하다는 것을 알아야합니다. stackoverflow.com/questions/2219916/is-font-face-usable-now
— David Johnstone
10
서체를 배포 할 권리가 있는지 확인하십시오!
— Viet
2
방문 typekit.com를 , 또는 싼에 대한 fontsquirrel.com
— bjudson
1
— Adrien Be
3
www.fontsquirrel.com은 필요한 글꼴 파일을 생성하고 좋은 방탄 @fontface 구문을 만드는 것이 좋습니다 (권장 fontspring.com/blog/fixing-ie9-font-face-problems 와 동일 )
— Adrien Be

답변:

500

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)를 사용합니다.

— 2, 사용자 2 83 %
소스
13
Internet Explorer와 Firefox는 모두 Webkit을 기반으로하지 않으므로 제 생각에는 쓸모없는 솔루션입니다.
— 캐스퍼
58
이 표준이기 때문에 그것은 쓸모가 아니다 : 더 당신이 그것을 구현, 더 많은 그것은 가능성이 브라우저에서 구현 될 것입니다. 그렇다고해서 보상 할 다른 방법을 찾아서는 안된다는 것을 의미하지는 않지만 이것을 보완 물로 사용하는 것이 나에게는 좋은 것 같습니다.
— 전자 위성
8
Firefox 3.1은 @ font-face를 지원합니다.
— Ms2ger
2
@brendanjerwin : 링크의 업데이트 된 버전 -brendanjerwin.com/development/web/2009/03/03/…
— Matt Ball
60
이봐, 얘들 아? 이제 거의 2016 년입니다! 이제 광범위하게 지원됩니다! 예이! 다행이 답이 늦었다. ㅋ.
— jessica dec
121

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 에는 지금까지 사용할 수있는 글꼴이 많지 않습니다 .

— 미 카프 ka 카와
소스
1
2014 년 7 월 Google은 글꼴을 확장했으며 대부분의 언어 google.com/get/noto/# 를 지원하는 Google Noto 글꼴을 포함 시켰습니다 . Abobe는 모든 언어를 지원하는이 공개 글꼴 이니셔티브를 지원했습니다. blog.typekit.com/2014/07/15/introducing-source-han-sans
— vsingh
(Google 웹 글꼴)은 .eot 및 .woff 및 .svg 버전의 글꼴을 지원하지 않는 것 같습니다. 글꼴의 .ttf 버전 만 지원합니다!
— 마흐디 Jazini
77

저자는 @ 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;
}

참고 문헌 및 추가 자료 :

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

— 하비에르 카디스
소스
2
매우 편리한 Font Squirrel 도구 는 전체 브라우저 지원에 필요한 CSS를 생성 할 수 있습니다. 또한 이러한 형식 중 하나로 글꼴을 업로드하고 다른 모든 형식으로 변환 한 후 모두 다운로드 할 수 있습니다. 사용자 정의 글꼴과 관련하여 생명의 은인입니다.
— Jacob Stamm
무엇 svgFontName을 의미합니까? 글꼴 패밀리 이름으로 바꾸거나 그대로 두어야합니까?
— Gherman
17

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

@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 글꼴이 모두 필요합니다. 온라인에서 사용 가능한 일부 도구는 변환을 수행 할 수 있습니다.

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

— BiAiB
소스
1
온라인 도구 예 : kirsle.net/wizards/ttf2eot.cgi 오프라인 도구 예 : code.google.com/p/ttf2eot/wiki/Demo는 - 또한 사용할 수 있어야한다 WOFF의 글꼴을.
— Wilf
11

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

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

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

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

— 매트
소스
24
얼마나 끔찍한 생각입니까! 브라우저에 플래시가 있지만 플래시 블록도 있습니다. 해당 웹 사이트에서 브라우저에 끔찍한 페이지가 표시됩니다. 플래시는 큰 애니메이션이나 영화에 사용하는 무언가를 유지해야합니다. 너무 많은 플래시는 짜증나고 시각적으로 지루합니다.
— e-satis
2
@ e-satis : 어떻게 요? 개인적으로, 미묘한 텍스트 렌더링 차이를 제외하고는 sIFR을 사용하는 페이지와 그렇지 않은 페이지의 차이점을 결코 알지 못합니다. 솔직히 말하면 @font-face지원되는 곳이 훨씬 낫지 만 좋은 생각이라고 생각합니다 .
— Sasha Chedygov
"편집 : (sifR이 프로젝트에 시간을 추가하고 유지 보수가 필요할 수 있으므로 비표준 글꼴에 이미지를 사용하는 것이 좋습니다." 아주 잘 말했다. sIFR은 정말 멋진 기술이지만 원하는 모양을 얻으려면 많은 것이 필요합니다. 이 기술을 배우고 익힐 시간이 있다면 강력히 추천합니다. 그러나 빠르고 쉬운 글꼴 교체 기술을 찾고 있다면 이미지 대체 또는 @ font-face css 속성을 사용합니다.
— Derek Adair
10

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

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

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

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

— 도마
소스
또 다른 흥미로운 옵션은 typekit.com 유사한 개념입니다.
— Zack
8

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

— 캐스퍼
소스
4

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

— 스티브 모이어
소스
4

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

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

— 조 비어
소스
JavaScript로 수행 할 필요는 없습니다. 요즘 많은 사람들이 JavaScript를 몇 가지 용도로 사용하고 싶어하지만 표준 CSS 기술이 더 적합 할 수 있습니다. 참조 sitepoint.com/article/header-images-css-xhtml
— hangy
혼란이 있다면 죄송합니다.이 기술은 CSS가 될 수있는 이미지 교체 방법을 말하는 것이 아닙니다. 서버에서 특정 글꼴 / 스타일로 지정된 문자열을 나타내는 그래픽을 생성하는 것입니다. 수동으로 만들 필요가 없습니다.
— zobier
4

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

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

그런 다음 해당 글꼴로 Graphics.

— mattlant
소스
1
글쎄, 네 ... 그리고 당신은 복사와 붙여 넣기를 잊어 버릴 수 있습니다. 오래된 브라우저에서도 확대 / 축소됩니다. 나는 심지어 대역폭 문제에 대해서도 이야기하지 않습니다!
— e-satis
2
예, 알았으며 질문은 콘텐츠 텍스트에 사용할 것이라고 지정 했습니까? 아닙니다. 일반적인 질문이었으며 일반적인 답변이었습니다. 텍스트, 헤더 등의 작은 스 니펫은 많은 대역폭을 차지하지 않습니다. esh, 그립 잡아!
— mattlant
3

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

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

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

— 켄트 프레드릭
소스
3

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

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

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

<!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>
— 아비 짓 쿠마르
소스
좋은 간단한 대안. 그리고 당신은 그것을 사용할 권리가 있습니다. developers.google.com/fonts/docs/getting_started
— Tim Erickson
2

Typeface.js JavaScript 방식 :

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

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

http://typeface.neocracy.org/

— 박칼
소스
2

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

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

— 사데 즈
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.