Vuetify.js 및 Nuxt.js에서 기본 글꼴 변경

SCSS 변수를 사용하여 입력 체계를 조정하는 방법에 대한 짧은 자습서입니다.

Unsplash에 Jon Tyson의 사진

Vuetify.js 는 쉽게 커스터마이즈 할 수있는 머티리얼 디자인 컴포넌트 프레임 워크입니다. 색상 테마와 별도로 CSS 스타일 시트가 생성되는 방식을 제어하는 ​​내부 변수를 변경할 수 있습니다. 이렇게하면 기본 글꼴을 변경할 수 있습니다.

이 예제에서는 Vue.js 의 메타 프레임 워크 인 Nuxt.js사용할 것 입니다. 두 가지 글꼴을 선택 했습니다. 본문 텍스트에는 Libre Baskerville , 헤더에는 Oswald 입니다. 간단하게 Google Fonts 서비스에서 이러한 글꼴을 검색하지만 Typesfaces 프로젝트 를 통해 자체 호스팅 버전을 선택할 수도 있습니다 (권장!).

TL; DR — 최종 코드로 바로 이동 :

하나의 글꼴 만

제가 제시 할 첫 번째 빠른 솔루션은 전체 애플리케이션에서 하나의 글꼴 만 사용할 수 있도록합니다. nuxt.config.js파일에 다음 코드를 추가하기 만하면 됩니다 ( 자세한 내용 은 defaultAssets 문서를 참조하고 treeShake옵션이 필요합니다).

vuetify: {
  treeShake: true,
  defaultAssets: {
  font: {
    family: 'Libre Baskerville'
  }
}

보다 완전하고 유연한 솔루션을 통해 제목과 텍스트 본문에 대해 별도의 글꼴을 사용할 수 있습니다. 우선, 애플리케이션에서 새 글꼴을 사용할 수 있도록하려면 nuxt.config.jsfile, headsection 에 스타일 시트 링크를 추가해야합니다 .

head: {
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald|Libre+Baskerville&display=swap' }
  ]
},

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true,
  defaultAssets: false
},

마지막으로, 변화 본체와 헤더 글꼴하기 위해, 당신은 설정해야합니다 $body-font-family, $heading-font-family그리고 $font-size-root변수를 /assets/variables.scss파일 :

$body-font-family: 'Libre Baskerville';
$heading-font-family: 'Oswald';
$font-size-root: 18px;
@import '~vuetify/src/styles/styles.sass';

결과

예상 결과.

그런 다음이 자습서를 따랐다면 위에 표시된대로 아래 템플릿에 대한 멋진 형식의 페이지를 얻을 수 있습니다. 요소 의 display-1클래스 속성에 유의하십시오. h1Vuetify.js는 , 및 클래스 가있는 요소 에만$heading-font-family 글꼴을 적용 합니다 (사용 가능한 모든 디스플레이 클래스는 Typography 참조 ).display-*headlinetitle

<v-container full-height>
  <v-row>
    <v-col cols="12">
      <h1 class="display-1">
        This is a Header
      </h1>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id massa viverra, aliquet augue nec, rhoncus turpis. Nam vitae ultricies enim. Aenean non pellentesque mauris, quis porta ligula. Mauris vulputate urna sit amet arcu scelerisque finibus. Quisque non tempor massa, vitae venenatis urna. Aenean at eleifend ex. Integer sollicitudin ex turpis, et ullamcorper sapien pellentesque sit amet. Vestibulum a ultricies ante. Sed posuere non nunc at tempus. Curabitur malesuada scelerisque tortor, eget suscipit urna. Praesent quis tellus in tortor condimentum ultricies non ut odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      </p>
    </v-col>
  </v-row>
</v-container>

회사 소개 : Untitled Factory Studio 는 프랑스 파리 몽마르트에 본사를 둔 부티크 웹 에이전시입니다. 다음 웹앱, PWA 또는 웹 사이트에 대해 이야기를 나눠보세요.

편집 : 사용자 지정 글꼴이 하나만 필요한 경우 defaultAssets 솔루션을 추가했습니다.

Suggested posts

Aldo Novarese와 디자인 공간 탐색

Aldo Novarese와 디자인 공간 탐색

시, 조각상, 멜로디와 같은 진정한 예술 작품은 언어, 대리석, 악보의 가능성에 이미 존재하는 형식이며, 작가는 그것을 정리처럼 발견합니다.

Chromium의 개인 정보 보호 샌드 박스로 더 나은 개인 정보 보호

Chromium의 개인 정보 보호 샌드 박스로 더 나은 개인 정보 보호

요즘에는 특히 브라우저와 관련하여 개인 정보 보호에 대한 많은 소문이 있습니다. 최근 Whatsapp이 모회사 인 Facebook과 사용자 데이터를 공유하기 시작할 것이라고 발표했을 때 큰 소동이있었습니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.