가변 글꼴 : 그들이 무엇인지, 그리고 그것들을 사용하는 방법

이 기사에서는 변수 글꼴을 둘러싼 흥미로운 새로운 가능성을 살펴 보겠습니다. 키 테이크 아웃

변수 글꼴은 OpenType 확장 가능한 글꼴 형식으로 번들로 제공되며, 단일 글꼴이 여러 글꼴처럼 작동하여 글꼴 자체 내에 변형이 정의되어 글꼴 구조를 단순화하고 성능을 향상시킵니다.

변수 글꼴은 표준 축을 제어하기 위해 글꼴 광학 크기, 글꼴 스타일, 글꼴 중량 및 글꼴 스트레치 또는 OPENTYPE 또는 TRUETYPE에 비해 낮은 수준 제어를위한 글꼴 변량 설정 CSS 속성을 사용하여 구현할 수 있습니다. 글꼴 변형.

성능은 가변 글꼴의 주요 장점이며, 단일 글꼴 파일이 다양한 가중치를 만들 수 있으며 페이지 가중치를 크게 줄일 수 있습니다. Woff2 파일 형식은 이러한 글꼴을 추가로 압축하여 추가 성능 이점을 제공 할 수 있습니다. 가변 글꼴에 대한 브라우저 지원은 여전히 ​​제한되어 있으며 변수 글꼴을 지원하지 않는 브라우저에는 폴백을 사용해야 할 수도 있습니다. 여기에는 비 변수 글꼴을 제공하거나 운영 체제 글꼴 폴백을 사용하는 것이 포함될 수 있습니다. 초기에도 불구하고 가변 글꼴의 잠재력은 엄청나게 성능을 향상시키고 개발을 단순화합니다. 여러 글꼴 파일에 대한 의존성을 크게 줄이고 페이지 중량을 잘라낼 수 있습니다.

우리가 여기에 어떻게 왔는지 HTML이 생성되면 각 웹 브라우저의 설정에 의해 글꼴과 스타일이 독점적으로 제어되었습니다. 90 년대 중반, 화면 기반 미디어의 첫 번째 서체 인 조지아와 베르 다나. 이들은 시스템 글꼴 (Arial, Times New Roman 및 Helvetica)과 함께 웹 브라우저에서 사용할 수있는 유일한 글꼴이었습니다 (정확히 유일한 유일한 것이 아니라 모든 운영 체제에서 찾을 수있는 것). 웹 브라우저의 진화로 NetScape Navigator의 태그와 같은 혁신과 첫 번째 CSS 사양을 사용하면 웹 페이지가 글꼴이 표시된 내용을 제어 할 수있었습니다. 그러나이 글꼴은 사용자의 컴퓨터에 설치해야했습니다.

1998 년 CSS 실무 그룹은 웹 페이지에서 모든 서체를 렌더링 할 수 있도록 @font-face 규칙의 지원을 제안했습니다. IE4는이 기술을 구현했지만 모든 사용자의 브라우저에 대한 글꼴을 라이센스 및 불법 복제 문제로 인상했습니다. 2000 년대 초반에는 HTML 컨텐츠를 스타일의 텍스트 이미지로 대체하는 이미지 교체 기술의 상승을 보았습니다. 각 텍스트는 Photoshop과 같은 프로그램에서 슬라이스해야했습니다. 이 기술은 디자이너가 글꼴 라이센스를 처리하지 않고도 사용 가능한 모든 서체를 사용할 수 있도록하는 주요 이점이있었습니다.2008 년 @font-face는 Apple Safari와 Mozilla Firefox가 구현했을 때 마침내 컴백을했습니다. 이것은 디자이너와 개발자가 접근 할 수없는 이미지가 아닌 사용자 정의 글꼴을 사용할 수있는 간단한 방법을 제공해야 할 필요성에서 나왔습니다. 2012 년 CSS3 글꼴 모듈이 도착하기 전까지는 글꼴 다운로드가 실행 가능해졌습니다. 일단 구현되면 웹 페이지에서 다운로드 한 글꼴은 해당 페이지에서만 사용될 수 있으며 운영 체제에 복사하지 않을 수 있습니다. 글꼴 다운로드를 통해 원격 글꼴을 브라우저에서 다운로드하여 사용할 수있었습니다. 즉, 웹 디자이너는 이제 사용자의 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있습니다. 웹 디자이너가 사용하고자하는 글꼴을 발견하면 웹 서버에 글꼴 파일을 포함시켜야하며 필요할 때 사용자에게 자동으로 다운로드됩니다. 이 글꼴은 @font-face 규칙을 사용하여 참조되었습니다 @font-face 규칙을 사용하려면 글꼴 이름을 정의하고 글꼴 파일을 가리켜 야합니다.

글꼴 파일은 TTF, Woff, Woff2, SVG 또는 EOT의 5 가지 형식 중 하나 일 수 있습니다. 각각 자체의 장점과 단점이 있습니다. 간단히 말해서, EOT는 Microsoft에 의해 만들어졌으며 Internet Explorer에서만 지원됩니다. TTF는 Microsoft와 Apple이 만든 기본 유형 글꼴이며 거의 모든 곳에서 완벽하게 작동합니다. SVG는 이미지 교체 기술을 기반으로하며 웹에만 적합합니다. 마지막으로 Woff와 Woff2는 웹 전용으로 만들어졌으며 기본적으로 추가 압축이있는 TTF 파일입니다. 변수 폰트 OpenType (컴퓨터 확장 가능한 글꼴 형식)의 버전 1.8은 2016 년에 출시되었습니다. 새로운 기술이 배송되었습니다 : OpenType 글꼴 변형, 가변 글꼴이라고도합니다. 이 기술을 사용하면 단일 글꼴이 여러 글꼴처럼 행동 할 수 있습니다. 글꼴 내에서 변형을 정의하여 수행됩니다. 이러한 변형은 각 캐릭터가 하나의 개요 만 가지고 있다는 사실에서 비롯됩니다. 이 개요를 구성하는 포인트는 어떻게 행동 해야하는지에 대한 지침이 있습니다. 매우 좁고 매우 넓은 정의 사이에 보간 될 수 있기 때문에 여러 글꼴 무게를 정의 할 필요는 없습니다. 이것은 또한 반대와 대담한 등의 스타일을 생성 할 수 있습니다. 이러한 변형은 글꼴의 하나 이상의 축을 따라 작용할 수 있습니다. 아래 이미지에는 문자 A에 대한이 개요 보간의 예가 있습니다.

변수 글꼴이 관련된 이유는 무엇입니까?

가변 글꼴은 글꼴 구조와 성능 향상에 단순성을 가져올 수 있습니다. 예를 들어 웹 사이트에 5 가지 글꼴 스타일이 필요한 상황을 예로 들어보십시오. 5 개의 다른 글꼴 파일을로드하는 것보다 5 가지 스타일을 렌더링 할 수있는 단일 변수 글꼴을 제공하는 것이 상당히 작고 빠릅니다.

.변수 글꼴 사용 현재 변수 글꼴을 사용하는 두 가지 방법이 있습니다. 먼저, 우리는 그것들을 구현하는 현대적인 방법을 살펴볼 것입니다. CSS 사양은 표준 축을 제어하기 위해 글꼴 광학 크기, 글꼴 스타일, 글꼴 중량 및 글꼴 스트레치를 사용하는 것을 강력히 선호합니다. 글꼴 광학 크기 이 속성을 사용하면 개발자가 브라우저가 약간 다른 시각적 표현으로 텍스트를 렌더링하여 다양한 크기로보기를 최적화하는지 여부를 제어 할 수 있습니다. 브라우저가 글리프의 모양을 수정할 수 없거나 가능할 때 자동으로 자동으로 값을 취할 수 있습니다. 글꼴 광학 크기를 지원하는 브라우저에서 값이 자동으로 설정된 글꼴은 아래 이미지의 글꼴과 마찬가지로 다를 수 있습니다.

값이 없음으로 설정하면 글꼴에 대한 변형이 없습니다. font 스타일 이 속성은 글꼴이 글꼴 제품군의 정상, 이탤릭체 또는 비스듬한 얼굴로 글꼴을 스타일로 만들어야하는지 여부를 지정합니다. 정상, 이탤릭체 또는 비스듬한 값을 취할 수 있습니다 font-weight 이 속성은 글꼴의 무게 (또는 대담함)를 지정합니다. 주목할만한 점은 일반적인 글꼴이있는 인스턴스를 정의 할 수 있다는 것입니다. 예를 들어, Bold는 Font-Weight와 동일합니다. 700 또는 Extra-Light는 Font-Weight와 동일합니다. 200. 글꼴 중량 속성은 1에서 1000 사이의 숫자 일 수 있지만 가변 글꼴을 사용할 때는 가변 글꼴을 사용할 수 있습니다. 비극성, 우리는 훨씬 더 미세한 세분성을 가질 수 있습니다. 예를 들어, Font-Weight : 200.01과 같은 값이 이제 가능합니다.
font-stretch 이 속성은 글꼴에서 정상, 응축 또는 확장 된 얼굴을 선택합니다. 글꼴 중량 속성과 마찬가지로, 균형이 잡히거나 정상과 같은 명명 된 인스턴스 또는 0%에서 100% 사이의 백분율 일 수 있습니다. 또한 명명 된 인스턴스는 알려진 백분율로 매핑됩니다. 예를 들어, 균형이 잡히면 62.5%로 매핑됩니다 이 예에서는 단일

제목과

단락이있는 매우 간단한 페이지를 만들었습니다. Codepen에서 sitepoint (@sitepoint)에 의해 펜 변수 fonts html을 참조하십시오. 현재, 우리의 스타일링되지 않은 웹 페이지는 다음과 같습니다

변수 글꼴을 사용하려면 적절한 파일을 찾아야합니다. V-Fonts 프로젝트는 모든 유형의 가변 글꼴을 검색하고 실험 할 수있는 글꼴 저장소를 제공합니다. 나는 Avenirnext 글꼴을 사용하여 공식 Github 페이지에서 연결하기로 결정했습니다. 그런 다음이 새로운 글꼴을로드하려면 CSS 파일을 만들어야합니다.

Codepen에서 SitePoint (@SitePoint)별로로드 된 변수 글꼴을 참조하십시오. 브라우저 지원 문제로 인해이 예제는 사파리와 크롬에 글꼴 변형 만 적용됩니다.
글꼴을로드 한 상태에서는 이제 글꼴 중량 속성을 사용하여 가변 글꼴의 중량 축을 조작 할 수 있습니다.

Codepen에서 sitepoint (@sitepoint) 별 Pen Sourcensans 변수 글꼴을 참조하십시오. 대부분의 경우에는 두 개의 다른 글꼴 파일이 필요합니다. 하나는 이탤릭체이고 하나는 일반 글꼴 (로마)입니다. 이 글꼴의 구성은 근본적으로 다를 수 있기 때문에 발생합니다. font-variation-settings를 사용하여

가변 글꼴을 사용하는 두 번째 방법은 글꼴 변수 설정 CSS 속성을 사용하는 것입니다. 이 속성은 변형 값과 함께 다른 기능의 4 글자 축 이름을 지정하여 OpenType 또는 Truetype 글꼴 변형에 대한 제어를 제공하기 위해 도입되었습니다. 현재 글꼴의 다음 측면에 액세스 할 수 있습니다.

wght-weight weight CSS 속성과 동일합니다. 값은 1에서 999까지의 모든 것이 될 수 있습니다 wdth-폭은 Font-Stretch CSS 속성과 동일합니다. 키워드 또는 백분율 값이 필요할 수 있습니다. 이 축은 일반적으로 우아하게 확장하거나 압축하기 위해 글꼴 디자이너에 의해 정의됩니다. opsz-광학 크기는 글꼴 광학 크기를 사용하여 켜거나 끄질 수 있습니다. Ital-이탤릭체는 글꼴 스타일 CSS 속성에 의해 제어됩니다. slnt-경사로 설정된 글꼴 스타일 CSS 속성과 동일합니다. 기본적으로 20도 경사로 기본적으로 이루어 지지만 -90deg와 90deg 사이의 지정된 학위도받을 수도 있습니다.

사양에 따르면,이 속성은 OpenType 글꼴 기능을 활성화하거나 액세스 할 수있는 다른 방법이없는 특수 사례를 처리하도록 설계된 저급 기능입니다. 그 때문에 대신 @font-face를 사용해야합니다.

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

위와 동일한 웹 페이지 및 글꼴을 사용하여 저수준 컨트롤러를 사용하여 글꼴의 무게와 너비를 설정해 보겠습니다.

Codepen에서 Sitepoint (@SitePoint)의 펜 변수 글꼴 1 참조.

선언은 다음 CSS 선언과 동일합니다 :

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

성능 성능은 가변 글꼴의 주요 장점입니다. avenirnext_variable.ttf 글꼴 파일은 89kb에 불과하지만 다양한 가중치를 만듭니다. 비슷한 표준 글꼴은 파일이 더 작을 수 있지만 하나의 무게와 스타일 만 지원할 수 있습니다. 추가 옵션에는 추가 파일이 필요하고 그에 따라 페이지 가중치를 높입니다. 그러나 우리는 더 나아갈 수 있습니다. 글꼴 형식에 대해 이야기했을 때 Woff2 파일은 본질적으로 추가 압축이있는 TTF 파일이라고 말했습니다. Woff2 파일은 사용자 정의 전처리 및 압축 알고리즘을 사용하여 다른 형식보다 ~ 30% 파일 크기 감소를 제공하기 때문에 더 작습니다. Google은 파일을 Woff2 형식으로 변환하는 것을 압축하는 명령 줄 도구를 제공합니다. 도구의 공식 Github 페이지에서 에 대한 모든 정보를 찾을 수 있습니다. Unix 환경에 설치하려면 다음 명령을 사용할 수 있습니다.

를 설치 한 후에는 다음을 사용하여 변수 글꼴 파일을 압축 할 수 있습니다.

그리고 우리는 42kb 파일로 끝나고 파일 크기를 절반으로 줄였습니다. 이 파일을 사용하려면이 새 파일을 수용하기 위해 소스 파일과 그 형식을 수정하면됩니다.

우리는 이제 우리 페이지의 모든 글꼴 무게에 사용할 수있는 단일 42KB 파일이 있습니다. Woff2 형식의 유일한 단점은 Internet Explorer가 지원하지 않는다는 것입니다. 다른 브라우저에 대해 다른 파일을 제공하는
일부 최신 브라우저는 이미 가변 글꼴을 지원하는 반면 (Firefox 개발자 에디션에는 약간의 지원 수준, Chrome 62, Chrome Android, Safari IOS 및 Safari)가 없을 수도 있습니다. > 이 문제를 해결하려면 해당 브라우저에 대한 불가능한 서비스를 제공하거나 운영 체제 글꼴 폴백을 사용해야합니다. 변수 글꼴을 지원하는 브라우저는 형식 ( 'Woff2-Variations')으로 표시된 파일을 다운로드하고 형식 ( 'TTF')으로 표시된 단일 스타일 글꼴을 다운로드하지 않는 브라우저를 다운로드합니다. 각 규칙의 변수에 대한 참조를 반복 할 수 있기 때문에 가능합니다. 첫 번째가 실패하면 두 번째는로드됩니다. 다음과 마찬가지로 :

다음 예제는 우리가 작업중인 것과 다른 파일 형식을 사용하지만 동일한 원칙을 사용합니다. Codepen에서 sitepoint (@sitepoint)로 여러 글꼴을 참조하십시오. 크롬과 같은 가변 글꼴을 지원하는 브라우저에서 결과를 확인하면 다음을 볼 수 있습니다.

Firefox와 같은 가변 글꼴을 지원하지 않는 브라우저에서 두 번째 글꼴이로드되고 결과는 다음과 같습니다.

그러나 우리가 변수를 지원하지 않는 브라우저에 비 변량 글꼴을 제공해야한다면 가변 글꼴로 방금 얻은 모든 성능을 잃지 않습니까? 브라우저가 표준 글꼴 만로드 할 수 있다면 가변 글꼴의 성능을 잃고 이점을 렌더링합니다. 이러한 상황에서는 많은 고정 글꼴로 대체하는 대신 비슷한 운영 체제 글꼴로의 폴백이 바람직 할 수 있습니다.

결론 몇 년 동안 이용할 수 있었음에도 불구하고 가변 글꼴은 여전히 ​​초기 단계에 있습니다. 브라우저 지원은 부족하며 선택할 글꼴이 거의 없습니다. 그러나 잠재력은 엄청나고 가변 글꼴은 개발을 단순화하면서 더 나은 성능을 허용합니다. 예를 들어, SitePoint의 자체 프론트 페이지는 현재 총 273KB의 8 개의 글꼴 파일을로드합니다. 가변 글꼴은 이러한 종속성을 줄이고 페이지 중량을 더 잘라낼 수 있습니다.

가변 글꼴 에 대한 자주 묻는 질문 (FAQ) 변수 글꼴을 사용하는 장점은 무엇입니까?

변수 글꼴은 전통적인 글꼴에 비해 몇 가지 장점을 제공합니다. 첫째, 단일 글꼴 파일의 다양한 변형을 제공하여 파일 크기를 크게 줄이고 웹 사이트의로드 속도를 향상시킬 수 있습니다. 이는 데이터 요금제가 제한된 모바일 사용자에게 특히 유익합니다. 둘째, 가변 글꼴은보다 창의적이고 반응이 좋은 디자인을 허용합니다. 디자이너는 글꼴의 무게, 너비, 경사 및 기타 속성을 조정하여 독특하고 역동적 인 시각적 경험을 만들 수 있습니다. 마지막으로, 가변 글꼴은 글꼴 렌더링에 미세 조정을 허용함으로써 특히 작은 화면 또는 저해상도 장치에서 텍스트의 가독성을 향상시킬 수 있습니다. CSS에서 가변 글꼴을 어떻게 구현합니까?

CSS에서 가변 글꼴을 구현하려면 몇 단계가 필요합니다. 먼저 @font-face 규칙을 사용하여 변수 글꼴 파일을 가져와야합니다. 그런 다음‘Font-Variation-Settings’속성을 사용하여 글꼴의 변형을 조정할 수 있습니다. 예를 들어, '글꼴 변수 설정 :“WGHT”700;'글꼴의 무게를 700으로 설정합니다. 특정 변형 태그 (무게에 대한“WGHT”)는 글꼴에 따라 다를 수 있습니다. 는 모든 브라우저에서 지원되는 가변 글꼴입니까?

현재로서는 Chrome, Firefox, Safari 및 Edge를 포함한 대부분의 최신 브라우저가 변수 글꼴을 지원합니다. 그러나이 브라우저의 이전 버전과 덜 일반적인 브라우저는이를 지원하지 않을 수 있습니다. 가변 글꼴에 대한 특정 브라우저 지원을 확인하고 지원되지 않는 브라우저에 대한 폴백 글꼴을 제공하는 것이 항상 좋은 생각입니다.

Google 글꼴과 함께 가변 글꼴을 사용할 수 있습니까?
예, Google Fonts는 변수 Fonts를 지원합니다. . Google 글꼴에서 글꼴을 선택하면 변수 글꼴 버전을 다운로드하기 위해 "변수"옵션을 선택할 수 있습니다. 그런 다음 CSS의‘Font-Variation-Settings’속성을 사용하여 글꼴의 변형을 조정할 수 있습니다. 인기있는 변수 글꼴은 무엇입니까?
Roboto, Source Sans, Amstelvar 및 Decovar를 포함하여 사용 가능한 많은 변수 글꼴이 많이 있습니다. 이 글꼴은 다양한 변형을 제공하며 다양한 디자인 스타일에 적합합니다. v-fonts.com 또는 Google 글꼴과 같은 웹 사이트에서 더 많은 가변 글꼴을 찾을 수 있습니다.

자신의 가변 글꼴을 어떻게 만들 수 있습니까?

자신만의 변수 글꼴을 만드는 글꼴 설계에 대한 지식이 필요합니다. Fontlab VI 또는 Glyphs와 같은 특정 소프트웨어. 이 프로그램을 사용하면 글꼴의 다양한 변형을 설계하고 단일 변수 글꼴 파일로 내보낼 수 있습니다. 그러나 글꼴 디자인은 많은 연습과 기술이 필요한 복잡한 프로세스입니다.

가변 글꼴의 한계는 무엇입니까?

가변 글꼴은 많은 장점을 제공하지만 몇 가지 제한 사항도 있습니다. 모든 글꼴이 가변 형식으로 제공되는 것은 아니며 모든 브라우저가 지원하는 것은 아닙니다. 또한 글꼴의 변형을 조정하는 것은 복잡 할 수 있으며 CSS 및 글꼴 디자인을 잘 이해해야합니다. 마지막으로, 가변 글꼴은 파일 크기를 줄일 수 있지만 많은 변형이 사용되면 파일 크기를 줄일 수 있습니다. 가변 글꼴이 웹 성능을 향상시키는 방법은 무엇입니까?

변수 글꼴은 어떻게 감소하여 웹 성능을 크게 향상시킬 수 있습니다. 로드 해야하는 글꼴 파일 수. 다른 글꼴 무게와 스타일에 대해 여러 파일을로드하는 대신 웹 사이트는 단일 변수 글꼴 파일을로드하고 필요에 따라 변형을 조정할 수 있습니다. 이렇게하면 파일 크기가 줄어들고 웹 사이트의로드 속도를 향상시킬 수 있습니다.

변수 글꼴을 애니메이션 할 수 있습니까?
예, CSS 애니메이션 또는 전환을 사용하여 가변 글꼴을 애니메이션 할 수 있습니다. 'Font-Variation-Settings'속성을 애니메이션으로 사용하면 시간이 지남에 따라 글꼴의 무게, 너비, 경사 또는 기타 속성을 변화시키는 동적 텍스트 효과를 생성 할 수 있습니다.
웹 타이포그래피의 미래는 가변적입니다. ?
웹 타이포그래피의 미래를 예측하기는 어렵지만 가변 글꼴은 확실히 큰 역할을 할 가능성이 있습니다. 그들의 유연성, 효율성 및 창의적 잠재력은 웹 디자이너를위한 강력한 도구입니다. 그러나 그들의 채택은 브라우저 지원, 가변 글꼴의 가용성 및 디자이너의 요구와 기술에 달려 있습니다.

위 내용은 가변 글꼴 : 그들이 무엇인지, 그리고 그것들을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!