nuxt 引入第三方字型、藝術字效果
阿新 • • 發佈:2021-01-30
技術標籤:css
- 在assets資料夾內新建font資料夾,將字型檔案(ttf等檔案)放在assets/font資料夾內
- 在assets資料夾內新建css資料夾,然後css資料夾內新建font.css檔案:
@font-face {
font-family: 'modeng';
font-weight: normal;
src: url('~assets/fonts/shetumodengxiaofangti.ttf') format('truetype');
}
.iconfont {
font-family: 'modeng' !important;
font-size: 16px;
font-style: normal;
}
assets資料夾內目錄結構如下:
├── README.md
├── css
│ └── font.css
└── fonts
└── shetumodengxiaofangti.ttf
- 編輯nuxt.config.js:
css: [
"@/assets/css/font.css"
]
- 使用:
div {
font-family: "modeng";
}
效果