capsize 다운로드 - capsize 소스 코드 다운로드

capsize

기타 소스코드

@capsizecss

다운로드

Capsize는 텍스트의 크기와 레이아웃을 화면의 다른 모든 요소만큼 예측할 수 있도록합니다.
글꼴 메타 데이터를 사용하면 텍스트는 대문자의 높이에 따라 크기를 조정하면서 대문자 위의 공간을 다듬고 기준선 아래에서 크기를 줄일 수 있습니다.

npm install @capsizecss/core

용법
- CreateStyleObject
- Createstylestring
옵션
- 텍스트 크기
- 라인 높이
- 글꼴 메트릭
핵심
- CreateFontStack
  - CSS 스타일 시트의 사용
  - CSS-in-JS 프레임 워크 사용
  - 추가 font-face 특성
- 프리 콤팩트 볼 루스
- GetCapheight
메트릭
짐 등에서 꺼내다
통합
- 바닐라 추출

용법

`createStyleObject`

CSS-in-JS 스타일 객체를 반환합니다.

createStyleObject 관련 옵션을 전달합니다.

 import { createStyleObject } from '@capsizecss/core' ;

const capsizeStyles = createStyleObject ( {
  fontSize : 16 ,
  leading : 24 ,
  fontMetrics : {
    capHeight : 700 ,
    ascent : 1058 ,
    descent : - 291 ,
    lineGap : 0 ,
    unitsPerEm : 1000 ,
  } ,
} ) ;

참고 : @capsizecss/metrics 패키지를 설치하고 메트릭을 가져 오는 것이 좋습니다.

 import { createStyleObject } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;

const capsizeStyles = createStyleObject ( {
  fontSize : 16 ,
  leading : 24 ,
  fontMetrics : arialMetrics ,
} ) ;

이러한 메트릭을 얻는 더 많은 방법은 아래에 문서화 된 FontMetrics 옵션을 참조하십시오.

예를 들어 css 소품을 통해 텍스트 요소에 스타일을 적용하십시오.

 < div
  css = { {
    // fontFamily: '...' etc,
    ... capsizeStyles ,
  } }
>
  My capsized text ?
< / div>

켈 참고 : 트림에 사용 된 스타일을 방해 할 위험이 있으므로 추가 레이아웃 관련 스타일을 동일한 요소에 적용하는 것이 좋습니다. 대신 중첩 요소를 사용하는 것을 고려하십시오.

`createStyleString`

style 태그에 삽입하거나 스타일 시트에 추가 할 수있는 CSS 문자열을 반환합니다.

createStyleString 가져 오기 관련 옵션을 전달합니다.

 import { createStyleString } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;

const capsizedStyleRule = createStyleString ( 'capsizedText' , {
  fontSize : 16 ,
  leading : 24 ,
  fontMetrics : arialMetrics ,
} ) ;

스타일을 스타일 시트 또는 style 요소에 추가하고 지정된 클래스 이름을 적용하십시오.

 document . write ( `
  <style type="text/css">
    ${ capsizedStyleRule }
  </style>
  <div class="capsizedText">
    My capsized text ?
  </div>
` ) ;

켈 참고 : 트림에 사용 된 스타일을 방해 할 위험이 있으므로 추가 레이아웃 관련 스타일을 동일한 요소에 적용하는 것이 좋습니다. 대신 중첩 요소를 사용하는 것을 고려하십시오.

옵션

텍스트 크기

Capsize는 텍스트 크기를 정의하는 두 가지 방법 인 capHeight 및 fontSize 지원합니다.

참고 : 둘 다가 아니라 하나만 통과해야합니다.

`capHeight: <number>`

대문자의 높이를 정의 된 값으로 설정합니다. 이러한 방식으로 타이포그래피를 정의하면 그리드 또는 다른 요소와 같은 아이콘, 산들 바람과 일치합니다.

`fontSize: <number>`

글꼴 크기를 설정하면 공백 트리밍의 모든 이점을 얻을 수 있으며 텍스트에 대한 명백한 font-size 지정할 수 있습니다. 이것은 콘크리트 디자인 사양과 일치하거나 기존 제품에 맞는 데 필요한 경우 유용 할 수 있습니다.

라인 높이

Capsize는 라인 높이, lineGap 및 leading 지정하기위한 두 가지 정신 모델을 지원합니다. 텍스트를 전달하지 않으면 지정된 글꼴의 기본 간격 (예 : line-height: normal 을 따릅니다.

참고 : 둘 다가 아니라 하나만 통과해야합니다.

`lineGap: <number>`

다음 라인의 기준선과 캡 높이 사이에서 측정 된대로 선 사이의 픽셀 수를 설정합니다.

`leading: <number>`

텍스트의 기준선에서 측정 된대로 라인 높이를 제공된 값으로 설정합니다. 이것은 웹을 설계 도구에서 타이포그래피를 처리하는 방법과 정렬합니다.

글꼴 메트릭

이 메타 데이터는 글꼴 자체의 메트릭 테이블에서 추출됩니다. 이 정보를 찾는 방법에는 여러 가지가 있습니다.

Google 글꼴 또는 시스템 글꼴을 사용하는 경우 @capsizecss/metrics 패키지를 설치하고 이름으로 메트릭을 가져 오십시오. 예를 들어:
```
 import arialMetrics from '@capsizecss/metrics/arial' ;
```
파일에서 글꼴을 사용하는 경우 @capsizecss/포장 패키지를 설치하고 글꼴 파일에서 메트릭을 직접 추출하십시오. 예를 들어:
```
 import { fromFile } from '@capsizecss/unpack' ;

const metrics = await fromFile ( filePath ) ;
```
또는 Capsize 웹 사이트를 사용하여 글꼴을 선택하고 3 단계에서 Metrics 탭을 참조하여 이들을 찾으십시오.

핵심

핵심 패키지는 또한 웹에서 타이포그래피를 개선하기위한 몇 가지 다른 메트릭 기반 기능을 제공합니다.

CreateFontstack

글꼴 패밀리 폴백의 정렬을 향상시키기 위해 메트릭 기반 @font-face 선언을 생성하여 웹 글꼴에 의존하는 사이트의 누적 레이아웃 시프트 메트릭을 극적으로 향상시킬 수 있습니다.

용법

원하는 웹 글꼴이 랍스터 인 Arial Helvetica Neue 같은 예 font-family: Lobster, 'Helvetica Neue', Arial 고려하십시오.

핵심 패키지에서 createFontStack 가져 오기 :

 import { createFontStack } from '@capsizecss/core' ;

원하는 각 글꼴에 대한 글꼴 메트릭을 가져옵니다 (위의 글꼴 메트릭 참조) :

 import lobster from '@capsizecss/metrics/lobster' ;
import helveticaNeue from '@capsizecss/metrics/helveticaNeue' ;
import arial from '@capsizecss/metrics/arial' ;

font-family CSS 속성을 통해와 동일한 순서를 사용하여 메트릭을 배열로 전달하는 글꼴 스택을 만듭니다.

 const { fontFamily , fontFaces } = createFontStack ( [
  lobster ,
  helveticaNeue ,
  arial ,
] ) ;

반환 된 값에는 생성 된 글꼴면 선언과 적절하게 주문한 글꼴 별명과 함께 계산 된 fontFamily 포함합니다.

CSS 스타일 시트 또는 스타일 태그의 사용

반환 된 값은 스타일 시트 또는 style 블록으로 템플릿 할 수 있습니다. 다음은 예제 핸들 바 템플릿입니다.

 < style type =" text/css " >
  .heading {
    font-family: {{ fontFamily }}
  }

  {{ fontFaces }}
</ style >

이것은 다음 CSS를 생성합니다.

. heading {
  font-family : Lobster , 'Lobster Fallback: Helvetica Neue' ,
    'Lobster Fallback: Arial' , 'Helvetica Neue' , Arial;
}

@font-face {
  font-family : 'Lobster Fallback: Helvetica Neue' ;
  src : local ( 'Helvetica Neue' );
  ascent-override : 115.1741 % ;
  descent-override : 28.7935 % ;
  size-adjust : 86.8251 % ;
}
@font-face {
  font-family : 'Lobster Fallback: Arial' ;
  src : local ( 'Arial' );
  ascent-override : 113.5679 % ;
  descent-override : 28.392 % ;
  size-adjust : 88.053 % ;
}

CSS-in-JS 프레임 워크 사용

CSS-in-JS 라이브러리로 작업하는 경우 styleObject fontFaceFormat 옵션으로 제공하여 반환 된 fontFaces JavaScript 스타일 객체로 제공 할 수 있습니다.

다음은 감정을 사용하는 예입니다.

 import { Global } from '@emotion/core' ;

const { fontFaces , fontFamily } = createFontStack (
  [ lobster , helveticaNeue , arial ] ,
  {
    fontFaceFormat : 'styleObject' ,
  } ,
) ;

export const App = ( ) => (
  < >
    < Global styles = { fontFaces } / >
    < p css = { { fontFamily } } > ... < / p >
  < / >
) ;

또한 더 이상 조작을위한 소스로서 유용하여 반복되거나 확장 될 수있는 데이터 구조라는 점에서 유용합니다.

추가 `font-face` 특성을 제공합니다

fontFaceProperties 옵션을 통해 생성 된 @font-face 선언에 추가 속성을 추가 할 수 있습니다.

 const { fontFamily , fontFaces } = createFontStack (
  [ lobster , helveticaNeue , arial ] ,
  {
    fontFaceProperties : {
      fontDisplay : 'swap' ,
    } ,
  } ,
) ;

이로 인해 다음은 선언에 추가됩니다.

 @font-face {
   font-family: 'Lobster Fallback: Helvetica Neue';
   src: local('Helvetica Neue');
   ascent-override: 115.1741%;
   descent-override: 28.7935%;
   size-adjust: 86.8251%;
+  font-display: swap;
 }
 @font-face {
   font-family: 'Lobster Fallback: Arial';
   src: local('Arial');
   ascent-override: 113.5679%;
   descent-override: 28.392%;
   size-adjust: 88.053%;
+  font-display: swap;
 }

메모

메트릭 재정의 CSS 속성을 전달하면 Capsize에 의해 계산되므로 무시됩니다. 그러나 size-adjust 속성은 특정 사용 사례에 대한 재정의 미세 조정을 지원하도록 허용됩니다. 이를 통해 특정 텍스트 조정을 세밀하게 사용하거나 100% 로 설정하여 조정을 비활성화하는 데 사용할 수 있습니다.

다른 문자 서브 세트에 대한 스케일링

다른 유니 코드 하위 집합을 사용하는 언어의 경우, 예를 들어 태국어는 스케일링이 서면 언어의 문자 주파수를 기반으로하므로 그에 따라 폴백을 스케일링해야합니다.

subset 옵션으로 지정하여 지원되는 서브 세트에 대해 폴백 글꼴 스택을 생성 할 수 있습니다.

 const { fontFamily , fontFaces } = createFontStack ( [ lobster , arial ] , {
  subset : 'thai' ,
} ) ;

팁

다른 유니 코드 서브 세트에 대한 지원이 필요하십니까? 문제를 만들거나 generate-weightings 스크립트에 요약 된 단계를 따르고 PR을 열십시오.

프리 콤팩트 볼 루스

제공된 글꼴 메트릭이 주어지면 특정 글꼴 크기에 대한 주요 트림 스타일을 생성하는 데 필요한 모든 정보를 반환합니다. 이것은 다양한 스타일링 솔루션과 통합하는 데 유용합니다.

CreateStyleObject 및 CreatestyLestring과 동일한 옵션을 허용합니다.

 import { precomputeValues } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;

const capsizeValues = precomputeValues ( {
  fontSize : 16 ,
  leading : 24 ,
  fontMetrics : arialMetrics ,
} ) ;

// => {
//  fontSize: string,
//  lineHeight: string,
//  capHeightTrim: string,
//  baselineTrim: string,
//}

GetCapheight

제공된 글꼴 메트릭이 주어지면 특정 글꼴 크기의 렌더링 된 캡 높이를 반환하십시오.

 import { getCapHeight } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;

const actualCapHeight = getCapHeight ( {
  fontSize : 24 ,
  fontMetrics : arialMetrics ,
} ) ;

// => number

메트릭

Font Metrics를 쉽게 검색하기 위해 Capsize는 시스템 및 Google 글꼴 모두에 필요한 모든 데이터가 포함 된 @capsizecss/metrics 패키지를 제공합니다.

npm install @capsizecss/metrics

문서화는 패키지를 참조하십시오.

짐 등에서 꺼내다

사용자 정의 글꼴을 사용하거나 @capsizecss/metrics 패키지에 포함되지 않은 경우 Capsize는 URL 또는 로컬 파일에서 필요한 데이터를 추출하기 위해 @capsizecss/unpack 패키지를 제공합니다.

npm install @capsizecss/unpack

문서화는 패키지를 참조하십시오.

통합

@capsizecss/vanilla-extract를 통해 바닐라-추출

감사해요

Deep Dive CSS를 작성하기위한 Vincent de Oliveira : 글꼴 메트릭, 라인 높이 및 세로 정렬 이이 모든 것을 구축하는 데 필요한 연구를 제공했습니다.
Fontkit을 만들기위한 Devon Govett는 덮개 아래에서 글꼴 메트릭을 추출하는 모든 무거운 리프팅을 수행합니다.
흥미로운 일을 할 공간을 우리에게 제공하십시오.