cssbundling-rails로 맞춤 글꼴 제공

10605 단어 railstailwindcss
https://mhenrixon.com/posts/serving-custom-fonts-with-cssbundling-rails에 원래 게시됨

글꼴 선택



내가 선택한 글꼴은 Open Sans이며, 다운로드하고 다양한 글꼴 파일을 app/assets/fonts/OpenSans 디렉토리에 추가했습니다.

.css.erb 사용



우선 asset_url 헬퍼가 작동하도록 하려면 .css.erb 파일을 사용하여 자산 파이프라인을 통해 글꼴을 지정해야 합니다. 자산에 다이제스트가 추가된 경우 프로덕션에서 경로를 직접 사용할 수 없습니다.

@font-face {
  font-family: "Open Sans";
  src: url("<%= font_path('OpenSans/Bold/OpenSans-Bold.woff2') %>") format("woff2"),
       url("<%= font_path('OpenSans/Bold/OpenSans-Bold.woff') %>") format("woff"),
       url("<%= font_path('OpenSans/Bold/OpenSans-Bold.ttf') %>") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("<%= font_path('OpenSans/BoldItalic/OpenSans-BoldItalic.woff2') %>") format("woff2"),
       url("<%= font_path('OpenSans/BoldItalic/OpenSans-BoldItalic.woff') %>") format("woff"),
       url("<%= font_path('OpenSans/BoldItalic/OpenSans-BoldItalic.ttf') %>") format("truetype");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Open Sans";
  src: url("<%= font_path('OpenSans/ExtraBold/OpenSans-ExtraBold.woff2') %>") format("woff2"),
       url("<%= font_path('OpenSans/ExtraBold/OpenSans-ExtraBold.woff') %>") format("woff"),
       url("<%= font_path('OpenSans/ExtraBold/OpenSans-ExtraBold.ttf') %>") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("<%= font_path('OpenSans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff2') %>") format("woff2"),
       url("<%= font_path('OpenSans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff') %>") format("woff"),
       url("<%= font_path('OpenSans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf') %>") format("truetype");
  font-weight: 800;
  font-style: italic;
}


opensans.css를 manifest.js에 추가



그런 다음 자산 매니페스트에 특수 글꼴 파일을 추가해야 합니다. 이렇게 하면 자산이 개발 및 프로덕션 모두에서 제공됩니다.

// ./app/assets/config/manifest.js

//= link_tree ../fonts
//= link_tree ../images
//= link_tree ../builds
//= link opensans.css
//= link_tree ../../javascript .js


TailwindCSS 구성



TailwindCSS에서 사용자 정의 글꼴을 기본값으로 사용하려면 글꼴에 Open Sans를 추가하기만 하면 됩니다.

// ./tailwind.config.js

module.exports = {
  content: [
    "./app/**/*.html.erb",
    "./app/helpers/**/*.rb",
    "./app/javascript/**/*.js",
    "./app/assets/stylesheets/**/*.js",
    "./app/components/**/*.js",
    "./app/components/**/*.css"
  ],
  theme: {
    fontFamily: {
      sans: [
        "Open Sans",
        "ui-sans-serif",
        "system-ui",
        "-apple-system",
        "BlinkMacSystemFont",
        '"Segoe UI"',
        "Roboto",
        '"Helvetica Neue"',
        "Arial",
        '"Noto Sans"',
        "sans-serif",
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"'
      ]
    }
  }
}


opensans.css.erb 사전 컴파일



자산 파이프라인에서 사용할 수 있도록 erb 자산을 사전 컴파일합니다.

# ./app/config/initializers/assets.rb

Rails.application.config.assets.precompile += %w[opensans.css.erb]


오픈샌즈 로드 중



마지막 단계는 application.html.erb 에 글꼴 파일을 로드하는 것입니다.

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html class="min-h-screen">
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "opensans", "data-turbo-track": "reload", defer: true %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload", defer: true %>
    <%= javascript_importmap_tags %>
  </head>
</html>
Python의 matplotlib에서 누적 막대 그래프를 만들고 데이터 레이블을 추가하려고했습니다.
점프 게임 II leetcode 문제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage