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

StackOverflow https://stackoverflow.com/questions/107936

  •  01-07-2019
  •  | 
  •  

문제

이미지를 사용하지 않고 웹사이트에 맞춤 글꼴을 추가할 수 있는 방법이 있나요? 플래시 아니면 다른 그래픽?

예를 들어, 저는 일부 결혼식 웹사이트에서 작업 중이었고 해당 주제에 대한 멋진 글꼴을 많이 찾았지만 서버에 해당 글꼴을 추가하는 올바른 방법을 찾을 수 없으며 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(TrueType-Fonts) 또는 WOFF(Web Open Font Format)를 사용하는 경우.

다른 팁

다음을 통해 일부 글꼴을 추가할 수 있습니다. 구글 웹 글꼴.

기술적으로 글꼴은 Google에서 호스팅되며 HTML 헤더에 연결됩니다.그런 다음 CSS에서 자유롭게 사용할 수 있습니다. @font-face (그것에 대해 읽어보세요).

예를 들어:

에서 <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-face CSS 선언을 사용하는 것입니다.작성자가 자신의 글꼴을 제공할 수 있도록 함으로써 @font-face는 사용자가 컴퓨터에 설치한 제한된 수의 글꼴에 의존할 필요를 없애줍니다.

다음 표를 살펴보십시오.

enter image description here

보시다시피, 주로 브라우저 간 호환성으로 인해 알아야 할 몇 가지 형식이 있습니다.모바일 장치의 시나리오도 크게 다르지 않습니다.

솔루션:

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 그리고 쿠폰 다른 두 가지 흥미로운 옵션이 있습니다.특수 글꼴 데이터를 JSON 형식(JSON 형식으로 변환할 수 있음)으로 렌더링하는 JavaScript 구성 요소입니다. 트루타입 또는 오픈타입 Internet Explorer를 제외한 모든 최신 브라우저의 새로운 <canvas> 요소를 통해 VML Internet Explorer에서

(현재로서는) 둘 다의 주요 문제점은 텍스트 선택이 작동하지 않거나 적어도 매우 어색하게 작동한다는 것입니다.

그래도 헤드라인용으로는 아주 좋습니다.본문 내용...모르겠습니다.

그리고 놀라울 정도로 빠릅니다.

아니면 시도해 볼 수도 있습니다. sIFR.나는 그것이 Flash를 사용한다는 것을 알고 있지만 가능한 경우에만 가능합니다.Flash를 사용할 수 없는 경우 원본 텍스트를 원본(CSS) 글꼴로 표시합니다.

사용하지 않고 웹사이트에 사용자 정의 글꼴을 추가할 수 있는 방법이 있습니까?플래시 ?

물론이죠. 사용하세요 실버라이트.

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

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

내가 본 가장 이식 가능한 솔루션은 JavaScript 기능을 사용하여 제목 등을 바꾸는 것입니다.이미지가 생성되어 선택한 글꼴로 서버에 캐시됩니다. 이렇게 하면 텍스트만 업데이트하고 Photoshop에서 작업할 필요가 없습니다.

ASP.NET을 사용하는 경우 다음을 사용하여 실제로 서버에 글꼴을 설치(설치된 글꼴 기반에 추가하는 것처럼)하지 않고도 이미지 기반 글꼴을 생성하는 것이 정말 쉽습니다.

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

그런 다음 해당 글꼴을 사용하여 Graphics.

Internet Explorer에서만 작동하는 것처럼 보이지만 "html 포함 글꼴"을 Google에서 빠르게 검색하면 결과가 나옵니다. http://www.spono.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 방식:

서체 .js를 사용하면 웹 페이지에 사용자 정의 글꼴을 포함시킬 수 있으므로 이미지에 텍스트를 렌더링 할 필요가 없습니다.

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

http://typeface.neocracy.org/

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

기사 보기 아름다운 웹 타이포그래피를 위한 50가지 유용한 디자인 도구 대체 방법의 경우.

나는 단지 사용했다 쿠폰.나는 그것이 안정적이고 사용하기 매우 쉽다는 것을 알았으므로 계속 사용했습니다.

해당 글꼴 파일이 있는 경우 다른 브라우저에 사용할 수 있는 해당 글꼴 형식을 더 추가해야 합니다.

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

이 경우 그래픽이 유일한 옵션인 것 같습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top