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

Programming

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

procodes 2020. 2. 12. 23:46

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

이미지, 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-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) 글꼴로 표시합니다.

... Flash를 사용하지 않고 웹 사이트에 사용자 정의 글꼴을 추가하는 방법이 있습니까?

물론, Silverlight를 사용하십시오 .

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/

Monotype은 최근 웹 페이지에서 사용할 수있는 새로운 시스템과 함께 많은 글꼴을 출시했습니다. http://www.webfonts.fonts.com/

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

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

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

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

이 경우 그래픽이 유일한 옵션입니다.

참고 URL : https://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a-website

'Programming' 카테고리의 다른 글

Java에서 바이트 크기를 사람이 읽을 수있는 형식으로 변환하는 방법은 무엇입니까? (0)	2020.02.12
UIDevice uniqueIdentifier 더 이상 사용되지 않음-지금 무엇을해야합니까? (0)	2020.02.12
존재하지 않음 vs 존재하지 않음 (0)	2020.02.12
앵커 안에 div를 넣는 것이 올바른가요? (0)	2020.02.12
XML에서 앰퍼샌드를 이스케이프 처리하여 HTML에서 엔티티로 렌더링하려면 어떻게해야합니까? (0)	2020.02.12

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

procodes

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

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

솔루션 :

참고 문헌 및 추가 자료 :

'Programming' 카테고리의 다른 글

'Programming'의 다른글

티스토리툴바

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

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

솔루션 :

참고 문헌 및 추가 자료 :

'Programming' 카테고리의 다른 글

'Programming'의 다른글

관련글

티스토리툴바