순풍 CSS 및 글꼴

개발자로서 우리는 어떤 상황에 직면하게 될 것이다. 어떤 이유로 우리의 뇌는 우리가 원하는 방식으로 운행할 수 없다. 우리는 이렇게 간단한 일을 생각해 내기 어려울 것이다. 아니면 나 혼자만 있을 것인가?오늘 나는 구글 몬트세라트 글씨체를 Tailwind에 가져오고 싶다.
구글 검색을 몇 차례 하고 다른 사람들이 하는 일을 시도한 후에 나는 구글을 일하게 할 수 없었다.그래서 기본적으로 반복적인 실험으로 귀결될 수 있다는 것이 나의 생각이다.
먼저 Google Fonts에서 제공하는 링크를 가져와야 합니다.

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap" rel="stylesheet">

그리고 너는 반드시 순풍 속에서 글씨체를 확장해야 한다.js 파일:

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                'montserrat': ['Montserrat'],
                'lato': ['Lato'],
                'garamond': ['Garamond']
            }
        }
    },
    variants: {},
    plugins: [
        require('@tailwindcss/ui'),
    ]
}

자산을 컴파일할 수 있는지 확인하십시오. 현재 다음과 같은 내용을 사용할 수 있습니다.

<div class="font-montserrat"></div>

네가 이렇게 할 때, 아주 멋있는 것은 구글 글꼴 링크에 서로 다른 권한을 포함하기만 하면,Tailwind는 자동으로 그것들을 추가할 것이다.그래서 우리는 이렇게 할 수 있다.

<div class="font-montserrat font-light"></div>

나는 이 단문을 쓰고 싶다. 다른 사람이 귀중한 시간을 낭비하는 것을 피할 수 있기를 바란다.나는 이 문장이 너를 도울 수 있기를 바란다. 만약 네가 더 좋은 방법이나 다른 방법을 알고 있다면, 평론에 상세한 정보를 남겨라.