웹 타이포그래피

Web typography
웹 글꼴을 사용하면 웹 디자이너가 뷰어 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있습니다.

타이포그래피는 월드 와이드 웹에서 글꼴을 사용하는 것을 말합니다.HTML이 처음 만들어졌을 , 글꼴 면과 스타일은 각 웹 브라우저의 설정에 의해서만 제어되었습니다.Netscape가 도입하기 전까지 개별 웹 페이지가 글꼴 표시를 제어하는 메커니즘은 없었습니다.font1995년에 HTML 3.2 사양으로 표준화되었습니다.단, 에 의해 지정된 글꼴은font요소를 사용자의 컴퓨터에 설치하거나 브라우저의 기본 sans-serif 또는 monospace 글꼴과 같은 폴백 글꼴을 사용해야 합니다.번째 캐스케이드 스타일 시트 사양은 1996년에 발표되었으며 동일한 기능을 제공합니다.

CSS2 사양은 1998년에 발표되었으며 글꼴 매칭, 합성 및 다운로드를 추가하여 글꼴 선택 프로세스를 개선하려고 시도했습니다.이러한 기술은 그다지 사용되지 않았으며, CSS2.1 사양에서는 삭제되었습니다.그러나 Internet Explorer는 [1]1997년에 출시된 버전 4.0에서 글꼴 다운로드 기능에 대한 지원을 추가했습니다.글꼴 다운로드는 나중에 CSS3 글꼴 모듈에 포함되었으며 이후 Safari 3.1, Opera 10 및 Mozilla Firefox 3.5에서 구현되었습니다.그 후 웹 타이포그래피와 폰트 다운로드에 대한 관심이 높아졌습니다.

CSS1

첫 번째 CSS [2]규격에서는 작성자가 일련의 속성을 통해 글꼴 특성을 지정했습니다.

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size

모든 글꼴은 이름으로만 식별되었습니다.위의 속성 외에 설계자는 글꼴을 스타일링할 방법이 없었고 클라이언트 시스템에 없는 글꼴을 선택하는 메커니즘도 존재하지 않았습니다.

웹 세이프 폰트

웹 안전 글꼴은 광범위한 컴퓨터 시스템에 존재할 가능성이 높은 글꼴로, 웹 콘텐츠 작성자가 선택한 글꼴로 콘텐츠가 표시될 가능성을 높이기 위해 사용합니다.웹 사이트 방문자가 지정된 글꼴을 가지고 있지 않은 경우, 브라우저는 작성자가 지정한 폴백 글꼴 및 일반 패밀리에 따라 유사한 대체 글꼴을 선택하려고 하거나 방문자의 운영 체제에서 정의된 글꼴 대체를 사용합니다.

Microsoft 웹용 핵심 글꼴

Arial, Georgia, Verdana는 Microsoft의 웹 프로그램용 Core 글꼴로 출시된 이후 웹의 세 가지 사실상의 글꼴이 되었습니다.

모든 웹 사용자가 기본 글꼴 세트를 가질 수 있도록 Microsoft는 웹 이니셔티브의 핵심 글꼴을 1996년에 시작했습니다(2002년에 종료됨).공개된 글꼴에는 Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, WebdingsVerdana포함되어 있으며, 이러한 글꼴을 자유롭게 배포할 수 있지만 일부 사용 권한도 제한했습니다.높은 보급률로 인해 웹 디자이너들의 주요 아이템이 되었습니다.그러나 대부분의 Linux 배포판에는 기본적으로 이러한 글꼴이 포함되어 있지 않습니다.

CSS2는 글꼴 합성, 향상된 글꼴 매칭 및 원격 [3]글꼴 다운로드 기능을 추가하여 웹 개발자가 사용할 수 있는 도구를 증가시키려고 시도했습니다.

일부 CSS2 글꼴속성은 CSS2.1에서 삭제되어 나중에 CSS3에 [4][5]포함되었습니다.

예비 글꼴

CSS 사양에서는 여러 글꼴을 폴백 [6]글꼴로 나열할 수 있습니다.CSS에서는font-family속성은 다음과 같이 사용할 쉼표로 구분된 글꼴 면 목록을 허용합니다.

폰트 패밀리: '님버스 산스 L, 헬베티카, Arial, 산세리프; 

지정된 첫 번째 글꼴이 우선 글꼴입니다.이 글꼴을 사용할 수 없는 경우 웹 브라우저는 목록의 다음 글꼴을 사용하려고 합니다.지정된 글꼴이 발견되지 않으면 브라우저에 기본 글꼴이 표시됩니다.이 프로세스는 브라우저가 지정된 글꼴에 존재하지 않는 문자를 표시하려고 할 때도 문자 단위로 발생합니다.

범용 글꼴 패밀리

지정된 글꼴을 사용할 수 없는 경우에도 웹 디자이너가 웹 페이지의 글꼴 모양을 제어할 수 있도록 CSS 사양에서는 여러 일반 글꼴 패밀리를 사용할 수 있습니다.이러한 패밀리는 일반적인 모양에 따라 글꼴을 여러 범주로 분할하도록 설계되었습니다.일반적으로 작성자가 지정한 글꼴을 사용할 수 없는 경우 마지막 수단으로 일련의 폴백 글꼴에서 마지막 글꼴로 지정됩니다.몇 년 동안 5개의 범용 [6]패밀리가 있었습니다.

산세리프

글자에 장식 마크 또는 세리프가 없는 글꼴.이러한 글꼴은 [7]종종 화면에서 읽기 쉬운 것으로 간주됩니다.

세리프

문자상에 장식 마크 또는 세리프가 있는 글꼴.이 글꼴들은 전통적으로 인쇄된 책에 사용됩니다.

모노스페이스

모든 글자의 폭이 동일한 글꼴입니다.

필기체

필기체를 닮은 글꼴입니다.이러한 글꼴은 장식적인 모양일 수 있지만 작은 크기에서는 읽기 어렵기 때문에 일반적으로 적게 사용됩니다.

공상

기호 또는 기타 장식 속성을 포함할 수 있지만 지정된 문자를 나타내는 글꼴입니다.

브라우저 지원이 적은 초안4의 CSS 글꼴

[8] System-ui

특정 시스템의 기본 글꼴: 이 옵션의 목적은 웹 콘텐츠를 네이티브 OS의 모양과 느낌과 통합하는 것입니다.

ui-serif

특정 시스템의 기본 글꼴(serif 스타일)

ui-disp-serif

지정된 시스템의 기본 글꼴(sans-serif 스타일)

ui-monospace

지정된 시스템의 기본 글꼴(단공간 형식)

ui-internal의

특정 시스템의 기본 글꼴을 둥근 스타일로 표시

이모티콘

이모티콘을 사용한 글꼴

수학

복잡한 수학 공식 및 식을 위한 글꼴입니다.

팡송(중국어: 팡송)

송서체와 카이서체 사이의 중국어 서체.이 스타일은 종종 정부 문서에 사용됩니다.

웹 글꼴

역사

리모트 폰트를 참조해 자동적으로 다운로드하는 기술은, CSS2 사양에 최초로 규정되어 있습니다.이 사양에서는, 다음과 같은 기능이 도입되었습니다.@font-face건설하다.그 당시 웹에서 글꼴 파일을 가져오는 것은 특정 웹 페이지에서만 사용되도록 의도된 글꼴도 [9]글꼴 라이센스를 위반하여 다운로드 및 설치할 수 있기 때문에 논란이 되었다.

마이크로소프트는 1997년에 Internet Explorer 4에서 다운로드 가능한 EOT 글꼴에 대한 지원을 처음 추가했습니다.작성자는 독자적인 WEFT 툴을 사용하여 각 페이지의 서브셋된 글꼴 파일을 작성해야 했습니다.EOT는 webfont가 동작할 수 있음을 보여주었고, 이 포맷은 일반적인 운영 체제에서 지원되지 않는 쓰기 시스템에서 일부 사용되었습니다.그러나 이 형식은 널리 받아들여지지 않았고 결국 W3C에 [10]의해 거부되었습니다.

2006년 Hakon Wium Lie는 EOT 사용을 반대하는 캠페인을 시작했고 웹 브라우저가 일반적으로 사용되는 글꼴 [11][12][13]형식을 지원하도록 했다.이후 일반적으로 사용되는 TrueType 및 OpenType 글꼴 형식은 Safari 3.1, Opera 10, Mozilla Firefox 3.5 및 Internet Explorer 9에서 지원되고 있습니다.

2010년에 Mozilla Foundation, Opera Software Microsoft에 의해 TrueType 및 OpenType 글꼴의 WOFF 압축 방식이 W3C에 제출되었으며 이후 브라우저가 지원을 [14][15][16]추가했습니다.

구글 폰트는 오픈 소스 라이선스로 웹 폰트를 제공하기 위해 2010년에 출시되었습니다.2016년까지 800개 이상의 웹폰 패밀리를 [17]이용할 수 있습니다.

웹 폰트는 웹 디자이너에게 중요한 도구가 되었으며 2016년 현재 대부분의 사이트에서 웹 [18]폰트를 사용하고 있습니다.

파일 형식

특정 CSS 사용@font-face내장[19] 기술은 IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+, Chrome 4.0+에서 작동하도록 글꼴을 내장할 수 있습니다.이를 통해 대다수의 웹 사용자가 이 기능에 액세스할 수 있습니다.일부 상업 주조 공장에서는 글꼴 재배포를 반대합니다.예를 들어 Hoefler & Frere-Jones는 디자이너가 온라인에서 안전하고 신뢰성 높은 고품질 글꼴을 사용할 수 있는 보다 표현력 높은 웹의 출현을 적극 지원하지만, 현재 글꼴 제공은 다음과 같습니다.@font-face주조 공장에서는 "유통품"으로 간주하며 [20]허용되지 않습니다.대신, Hoefler & Co.는 클라우드에 뿌리를 둔 독자 글꼴 전달 시스템을 제공합니다.다른 많은 상업용 주조 공장에서는 웹 글꼴 라이센스로 알려진 특정 라이센스를 제공하여 글꼴 재배포를 해결합니다. 웹 글꼴 라이센스는 글꼴 소프트웨어를 사용하여 웹에 콘텐츠를 표시할 수 있도록 합니다. 이 라이센스는 일반적으로 기본 데스크톱 라이센스에 의해 금지되어 있습니다.당연히 이는 무료 라이센스 [m 1]하에 있는 글꼴과 주조 공장에 방해가 되지 않습니다.

TrueDoc

TrueDoc은 특별히 webfont 사양은 아니지만 글꼴을 내장하기 위한 최초의 표준이었습니다.1994년 타입 파운드리 비트스트림에 의해 개발되었으며 1996년 Netscape Navigator 4에서 네이티브로 지원되게 되었습니다.넷스케이프가 비트스트림의 소스 코드를 출시할 수 없는 오픈 소스 라이선스 제한으로 인해 넷스케이프 내비게이터 6이 출시되었을 때 기술에 대한 네이티브 지원은 종료되었습니다.ActiveX 플러그인은 Internet Explorer에 TrueDoc 지원을 추가하기 위해 사용 가능했지만 이 기술은 버전 4.0 [21]이후 Internet Explorer 브라우저에서 기본적으로 지원되던 Microsoft의 Embedded OpenType 글꼴과 경쟁해야 했습니다.또 다른 장애물은 TrueDoc 형식으로 웹 폰트를 작성하기 위한 오픈 소스 또는 무료 툴이 부족했던 반면, Microsoft는 무료 임베딩 폰트 도구를 사용하여 웹 폰트를 작성했습니다.

임베디드 오픈 타입

Internet Explorer는 버전 4.0 이후 독자 사양의 Embedded OpenType 표준을 통해 글꼴 임베딩을 지원했습니다.라이센스 없이 글꼴이 복사되어 사용되는 것을 방지하기 위해 디지털 권한 관리 기술을 사용합니다.EOT의 단순화된 서브셋은 CWT(Compatibility Web Type, 이전 EOT-Lite)[22]라는 이름으로 공식화되었습니다.

스케일러블 벡터 그래픽스

타이포그래피는 SVG에 다음 두 가지 방법으로 적용됩니다.

  1. SVGT 서브셋을 포함한 SVG 1.1 사양의 모든 버전은 SVG 문서 내에서 글꼴을 작성할 수 있는 글꼴모듈을 정의합니다.Safari는 버전 3에서 이러한 속성 중 많은 부분을 지원하게 되었습니다.Opera는 버전 8.0에서 사전 지원을 추가했으며 9.0에서는 더 많은 속성을 지원했습니다.
  2. SVG 사양에서는 CSS를 HTML 문서와 마찬가지로 SVG 문서에 적용할 수 있습니다.@font-faceSVG 문서의 텍스트에 규칙을 적용할 수 있습니다.Opera는 버전 [23]10에서 이를 지원하며 버전 325 이후 WebKit도 SVG 글꼴만 사용하여 이 방법을 지원합니다.

스케일러블 벡터 그래픽스 폰트

SVG 글꼴은 OpenType [24]글꼴의 하위 집합이 된 SVG 그래픽을 사용하는 W3C 표준 글꼴입니다.다색[25] 또는 애니메이션 글꼴을 사용할 [26]수 있습니다.처음에는 SVG 1.1 사양의[27] 서브셋이었지만 SVG 2.0 사양에서는 사용되지[28] 않습니다.SVG 글꼴은 IE 및 Firefox를 제외한 대부분의 브라우저에서 지원되며 Chrome(및 Chromium)[29]에서는 사용되지 않습니다.이는 일반적으로 권장되지 않습니다. 대부분의 브라우저 벤더가 동의한 표준은 SVGOpenTypeFonts라고 하는 OpenType([30]및 WOFF 슈퍼셋, 아래 참조)에 포함된 SVG 폰트 서브셋입니다.Firefox는 Firefox 26부터 SVG OpenType을 지원했습니다.

TrueType/OpenType

업계 표준 TTF(TrueType) 및 OpenType(TTF/OTF)[32] 글꼴로의 링크는 Mozilla Firefox 3.5+, Opera 10+,[31] Safari 3.1+ 및 Google Chrome 4.0+[33]에서 지원됩니다.Internet Explorer 9+는 삽입 [34]권한이 설치 가능으로 설정된 글꼴만 지원합니다.

웹 오픈 폰트 형식

Web Open Font Format(WOFF)은 기본적으로 압축 및 추가 메타데이터가 포함된 OpenType 또는 TrueType입니다.WOFF는 Mozilla Firefox 3.6+,[35] Google Chrome 5+,[36][37] Opera Presto에서 [38]지원되며 Internet Explorer 9(2011년 [39]3월 14일 이후)에서 지원됩니다.Mac OS X Lion's Safari 릴리즈 5.1부터 지원이 가능합니다.

유니코드 글꼴

Windows 플랫폼에서 기본적으로 사용할 수 있는 글꼴은 Microsoft Sans Serif와 Lucida Sans Unicode 두 개뿐이며 광범위한 유니코드 문자 레퍼토리를 제공합니다.Verdana의 버그(및 다양한 사용자 에이전트에 의한 버그 처리의 차이)는 문자 조합이 필요한 경우의 조작성을 방해합니다.

Linux, GNU Unifont 및 GNU FreeFont같은 자유오픈 소스 소프트웨어 플랫폼에서는 광범위한 유니코드 문자를 제공합니다.

대체 수단

웹 디자인에서 일반적인 장애물은 웹이 안전하지 않은 글꼴을 포함하는 목업 디자인입니다.이런 상황에 대한 해결책이 많이 있습니다.일반적인 해결책 중 하나는 텍스트를 유사한 웹 안전 글꼴로 바꾸거나 유사한 모양의 일련의 폴백 글꼴을 사용하는 것입니다.

또 다른 기술은 이미지 치환입니다.이 작업에서는 텍스트에 원하는 글꼴로 작성된 동일한 텍스트를 포함하는 이미지를 덮어씁니다.이는 심미적인 목적으로는 좋지만 텍스트 선택을 방해하고 대역폭 사용을 증가시키며 검색 엔진 최적화에 좋지 않으며 장애가 [citation needed]있는 사용자가 텍스트에 액세스할 수 없게 합니다.

과거에는 sIFR과 같은 플래시 기반 솔루션이 사용되었습니다.텍스트는 선택할 수 있고 벡터로 렌더링할 수 있지만 이미지 치환 기술과 유사합니다.그러나 이 방법을 사용하려면 클라이언트 시스템에 전용 플러그인이 있어야 합니다.

또 다른 솔루션은 Javascript를 사용하여 텍스트를 VML(Internet Explorer용) 또는 SVG(기타 [40]모든 브라우저용)로 대체하는 것입니다.

「 」를 참조해 주세요.

  • 확장 가능한 Inman 플래시 교체
  • WOFF(2009-10-23)에 기재된 RFC 목록:
    • RFC 1950 ZLIB 압축 데이터 포맷 사양
    • RFC 2119 요건 수준을 나타내기 위해 RFC에서 사용하는 키워드
    • RFC 4647 언어 태그의 매칭

메모들

  1. ^ 이러한 글꼴은 오픈 소스 서체자유 소프트웨어 유니코드 서체 목록을 참조하십시오.

레퍼런스

  1. ^ Garaffa, Dave (2 September 1997). "Embedded Fonts In Microsoft IE4pr2". Internet.com. Archived from the original on 8 July 1998.
  2. ^ Cascading Style Sheets, level 1, W3C, 1996-12-17
  3. ^ "Fonts", Cascading Style Sheets, level 2:CSS2 Specification, World Wide Web Consortium, 1998-05-12, retrieved 2009-07-28
  4. ^ CSS2.1 Changes —C.2.97 Chapter 15 Fonts, World Wide Web Consortium, retrieved 2010-01-30
  5. ^ CSS3 module: Web Fonts, World Wide Web Consortium, retrieved 2010-01-30
  6. ^ a b "CSS2 specification", Fonts, World Wide Web Consortium
  7. ^ Poole, Alex (2005-04-07). "Which Are More Legible: Serif or Sans Serif Typefaces?". Archived from the original on 2017-07-22. Retrieved 2017-09-27.
  8. ^ "Ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for font-family Can I use... Support tables for HTML5, CSS3, etc".
  9. ^ Hill, Bill (2008-07-21), Font Embedding on the Web, Microsoft
  10. ^ W3C 팀의 코멘트
  11. ^ 마이크로소프트의 잊혀진 독점
  12. ^ 웹 폰트: 자유세계에서 보기
  13. ^ CSS @ 10:차세대 빅싱
  14. ^ WOFF 파일 포맷 1.0 W3C로의 송신 요구
  15. ^ Galineau, Sylvain (2010-04-23), Meet WOFF, The Standard Web Font Format, Microsoft
  16. ^ WOFF conversion reference code, retrieved May 8, 2016
  17. ^ "The new Google Fonts database is a design geek's paradise". Theverge.com. Retrieved 24 August 2016.
  18. ^ 리처드 핑크 (2016-09-06)초원의 웹폰트, 알리스트 아파트
  19. ^ Kimler, Scott Thomas (2009-07-04), xBrowser Fonts — Expand Your Font Palette Using CSS3, retrieved 2010-02-05
  20. ^ Wubben, Mark (February 27, 2009). "Geek Meet: Web Typography and sIFR 3 - Slide 15 and 16". SlideShare. Retrieved 17 March 2010.
  21. ^ Niederst, Jennifer (2001). Web design in a nutshell: a desktop quick reference (2nd ed.). O'Reilly. p. 36. ISBN 0-596-00196-7. Retrieved 20 March 2016. what year was truedoc developed.
  22. ^ Daggett, John (2009-07-31), EOT-Lite File Format v.1.1, World Wide Web Consortium, retrieved 2010-01-30
  23. ^ Mills, Chris (2008-12-04), Opera Presto 2.2 and Opera 10 — a first look, Opera Software, retrieved 2010-01-30
  24. ^ SVG in OpenType, W3C, retrieved 2014-09-20
  25. ^ Colorful typography on the web: get ready for multicolor fonts, Pixel Ambacht, retrieved 2014-09-20
  26. ^ Anymated Glyph Example, people.Mozilla, retrieved 2014-09-20
  27. ^ Fonts, W3C, retrieved 2014-09-20
  28. ^ Fonts chapter, W3C, retrieved 2018-03-08
  29. ^ Can I Use SVG fonts, CanIuse, retrieved 2014-09-20
  30. ^ SVGOpenTypeFonts, Mozilla, retrieved 2014-09-20
  31. ^ Mills, Chris (2008-12-04), Opera Presto 2.2 and Opera 10 — a first look, Opera Developer Community, retrieved 2010-01-29
  32. ^ Marsal, Katie (2008-02-07), Apple's Safari 3.1 to support downloadable web fonts, more, AppleInsider, retrieved 2010-02-05
  33. ^ Irish, Paul (2010-01-25), Chrome and @font-face: It's here!
  34. ^ Galineau, Sylvain (2010-07-15), The CSS Corner: Better Web Typography For Better Design, Microsoft
  35. ^ Shapiro, Melissa (2009-10-20), Mozilla Supports Web Open Font Format, Mozilla, retrieved 2010-02-05
  36. ^ Gilbertson, Scott (2010-04-26), Google Chrome to Support the Web Open Font Format, webmonkey
  37. ^ Bug 38217 - [chromium] Add WOFF support, WebKit
  38. ^ Web specifications support in Opera Presto 2.7, Opera
  39. ^ Galineau, Sylvain (2010-04-23), Meet WOFF, The Standard Web Font Format, Microsoft
  40. ^ Cufon에 대해서

외부 링크