在項目中使用指定字體應該是正常操作了。可以使用css3新增的font-face這個屬性來搞事情
在vue項目中如何使用，額，我寫了以下幾種方式：
在這之前要說下寫上面的代碼時碰到的問題
format('truetype')
我之前也是網上復制粘貼，被誤導寫成了
format('ttf')
發現字體不生效，然后把format這個標識符去掉，發現又生效了。所以我就看了下format這個屬性的用法：
翻譯：
外部引用由URL組成，后跟可選提示，描述此URL引用的字體資源的格式。格式提示包含以逗號分隔的格式字符串列表，表示眾所周知的字體格式。
如果格式提示僅指示不支持或未知的字體格式，則用戶代理(瀏覽器)必須跳過下載字體資源。如果未提供格式提示，則用戶代理應下載字體資源。
這就解釋了為什么當我寫成 ttf時不生效。去掉ttf就生效了。
上圖是支持的格式描述，所謂ttf就是truetype，改成truetype就可以了。有興趣的同學可以繼續深入 https://drafts.csswg.org/css-fonts-3/#src-desc
第一種方式：
1.將css放在public中，再從index.html中引入
因為public是靜態文件夾，打包器並不會對這些進行處理，並且vue-cli 3也這么友好的提示了
第二種方式
2.將css放在src中然后import引入
上面的兩種方式都能行的通，但是有人可能會注意到，我寫的是font.css格式的文件，而不是styl格式的文件，因為我把font.css換成styl格式之后，構建就報錯了
我初步懷疑是預處理器或者是vue-loader不支持ttf格式的文件，這個還需要進一步去驗證，不過發現有同學和我遇到同樣的問題，不過他好像是使用的scss預處理器。
https://segmentfault.com/q/1010000016981396
/*****************************************更新部分*********************************************/
天嚕啦，知道為啥會報錯嗎，錯誤提示很明顯，這個找不到相對模塊，也就是找不到我這個STXinwei.ttf文件，和什么預處理和什么vue-loader屁關系都沒有
是因為
注意：是相對於包含@font-size規則的樣式表的位置進行解析。(還好我翻譯了下這個頁面，對這個有點印象)
這也就是為什么我引入font.styl，然后再使用這個字體的時候構建提示找不到模塊。因為我在font.styl中引入字體的資源是相對font.styl的路徑引用的，但是font-face是相當於包含它的樣式表的位置進行解析的。
我在HeadTopBar.vue文件中引用了font.styl，那么font-face的url的引用是相對於HeadTopBar.vue文件路徑的，
所以我把HeadTopBar.vue文件中的HeadTopBar.vue資源路徑改為相對於HeadTopBar.vue 去引用，構建就不會報錯啦
真是萬萬沒想到啊，以下是我的文件路徑和代碼
綜上。
至於為什么.css格式的文件就沒問題，我的理解是css格式的文件相對於預處理器styl格式的文件，是一個整體，是一個真正意義上的包含font-face的樣式表。
而styl格式文件被引用是作為一個模塊，作為一個部分去應用到HeadTopBar.vue這個文件中。所以真正包含font-face的是經過預處理器和css-loader處理過的HeadTopBar.css