TailwindCss:本地字体未显示(在 Vue 3 中)

Posted

技术标签:

【中文标题】TailwindCss:本地字体未显示(在 Vue 3 中)【英文标题】:TailwindCss: Local font not showing (in Vue 3) 【发布时间】:2021-10-23 13:51:19 【问题描述】:

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

我跑了: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后加引号和不加引号没有区别(

我如何将它们连接到配置中

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>

有和没有“斜体”都一样 它适用于:

@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");

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

【问题讨论】:

【参考方案1】:

以这种方式排列文件

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 中)的主要内容,如果未能解决你的问题,请参考以下文章

Vue Cli 3本地字体未加载

vue.js cli 项目未加载本地字体

TailwindCSS - 添加字体大小

下一个 tailwindcss 谷歌字体链接标签不适用

TailwindCSS Flexbox 导航栏链接未内联显示

Firefox:未显示本地托管的网络字体 - 即使使用 Access-Control-Allow-Origin "*"