astro font picker

Astro Font Picker

Astro Font Picker는 DEV 도구 모음 통합으로 사이트에서 다른 글꼴을 사용해 볼 수 있습니다. Google 글꼴을 사용하여 1000 개가 넘는 오픈 소스 글꼴을로드합니다. 위/다운 키를 사용하여 다른 글꼴을 빠르게 순환하거나 목록에서 하나를 선택하십시오.

설치

자동 설치 :

 npx astro add astro-font-picker

수동 설치 :

 npm install astro-font-picker

astro.config.mjs 파일에 다음을 추가하십시오.

 import astroFontPicker from 'astro-font-picker' ;

export default {
  integrations : [
    astroFontPicker ( ) ,
    // other integrations
  ] ,
} ; 

용법

Astro Font Picker는 DEV 도구 모음에서 새로운 아이콘으로 표시되며 Astro 4.0 이상에서 기본적으로 활성화됩니다.

유형별 (선택 사항)별로 글꼴을 필터링 한 다음 글꼴 패밀리를 선택하십시오. 글꼴은 사이트의 신체 요소에 적용됩니다.

글꼴 패밀리가 신체 요소보다 낮은 요소에 적용되는 경우 Override All Styles 토글을 재정의하지 않으면 글꼴을 무시하지 않습니다.

힌트 : 위/아래 화살표 키를 사용하여 글꼴을 빠르게 순환 할 수 있습니다.

활성화

이 토글은 선택한 글꼴이 페이지에 적용되는지 여부를 제어합니다. 기본적으로 활성화됩니다.

모든 스타일을 무시합니다

이 토글은 선택한 글꼴로 사이트의 모든 font-family 스타일을 무시합니다. 이 가능하지 않으면 신체 요소보다 낮은 요소에 적용되는 글꼴 패밀리는 재정의되지 않습니다.

Override All Styles 토글을 비활성화하는 주된 이유는 사이트의 특정 요소 또는 섹션의 글꼴 스타일을 유지하기 때문입니다. 이런 식으로 글꼴 피커를 사용하여 다른 영역의 글꼴을 선택하면 이미 결정한 글꼴을 무시하지 않습니다.

글꼴 CSS 출력

이것은 스타일 시트 링크 및 CSS로, 사이트에 복사하여 붙여 넣어 글꼴을 영구적으로 설치할 수 있습니다. 예를 들어:

head 요소에서 :

 < link rel =" stylesheet " href =" https://fonts.googleapis.com/css2?family=Itim " />

CSS에서 :

 h1 {
    font-family : Itim , cursive;
}

Google Fonts에서 봅니다

이 링크는 Google 글꼴에서 선택한 글꼴을 열 것입니다.

설정은 세션 스토리지에 저장됩니다

모든 설정 (활성화, 재정의, 글꼴 유형 및 글꼴 패밀리)은 세션 스토리지에 저장되므로 개발 중에 페이지가 새로 고침 될 때 손실되지 않습니다.

다른

이 프로젝트는 Fontable Library를 기반으로하며 모든 웹 사이트에서 사용할 수있는 독립형 글꼴 선택기입니다.