1. 程式人生 > 其它 >nuxt 引入第三方字型、藝術字效果

nuxt 引入第三方字型、藝術字效果

技術標籤:css

  1. 在assets資料夾內新建font資料夾,將字型檔案(ttf等檔案)放在assets/font資料夾內
  2. 在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
  1. 編輯nuxt.config.js:
   css: [
    "@/assets/css/font.css"
   ]
  1. 使用:
	div {
		font-family: "modeng";
	}

效果
在這裡插入圖片描述