TailwindCss:本地字体未显示(在 Vue 3 中) [英] TailwindCss: Local font not showing (in Vue 3)

问题描述

我尝试在 CSS 中嵌入本地字体，但未显示字体.浏览器说，它是语言环境字体，编辑器完成也可以工作(文本-...)，但字体看起来不同.

I try to embed local fonts in CSS, but the font is not shown. Browsers says, it is the locale font, Editor completion works too (text-...) but the font looks different.

我运行:npx tailwindcss build -i src/assets/styles/index.css --output src/assets/styles/tailwind.css 用于构建.

src/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.ttf
src/assets/fonts/Inter/Inter-Bold.ttf

我如何导入文件

/*index.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'IBM Plex Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    src: local('IBM Plex Sans'), local('IBMPlexSans'), url('../fonts/IBM_Plex_Sans/IBMPlexSans-Italic.ttf') format('ttf');
  }
  
  @font-face {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    src: local('Inter'), local('Inter'), url('../fonts/Inter/Inter-Bold.ttf') format('ttf');
  }
}

url 后有无引号没有区别(

No difference with or without quotes after url(

tailwind.config.js
module.exports = {
...
  theme: {
    extend: {
      fontFamily: {
        // https://tailwindcss.com/docs/font-family#customizing
        ibmplexsans: ["'IBM Plex Sans'"],
        inter: ["'Inter'"],
      },
    },
  },
...
};

我如何在 Vue 组件中使用它们

<span class=" font-ibmplexsans italic text-blue-600">publish</span>

带有和不带有斜体"的相同它适用于:

Same with and without 'italic' It works fine with:

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,600;1,400;1,600&family=Inter:wght@600&display=swap");

如何使用本地文件实现这一点.

How can I achiev that with local files.

推荐答案

这样安排文件

public/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.ttf
public/fonts/Inter/Inter-Bold.ttf

此外，将 index.css 沿此路径放置

public/fonts/index.css

像这样的内容

@font-face {
  font-family: 'IBM Plex Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  src: local('IBM Plex Sans'), local('IBMPlexSans'), url('./IBM_Plex_Sans/IBMPlexSans-Italic.ttf') format('ttf');
}

В public/index.html

<link rel="stylesheet" href="/fonts/index.css">

这篇关于TailwindCss:本地字体未显示(在 Vue 3 中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！