<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          vue項目引入字體.ttf
          
				
           2021-8-12      前端達人      
          
			
          
			
          
				
          
    1、下載所需要的字體，.ttf格式本文以（FZCYJ.ttf 為例）

          

          
    2、在src下新建common文件，文件夾中包含以下文件

          

          
    
          

          

          
    3、打開font.css

          

          

            

    
          1. 

        
            

            
            

            
            

        
            

        
            

            
            
                @font-face {
            
            

        
            

    
            2. 

    
          2. 

        
            

            
            

            
            

        
            

        
            

            
            
                font-family: 'FZCYJ'; //重命名字體名
            
            

        
            

    
            3. 

    
          3. 

        
            

            
            

            
            

        
            

        
            

            
            
                src: url('FZCYJ.ttf'); //引入字體
            
            

        
            

    
            4. 

    
          4. 

        
            

            
            

            
            

        
            

        
            

            
            
                font-weight: normal;
            
            

        
            

    
            5. 

    
          5. 

        
            

            
            

            
            

        
            

        
            

            
            
                font-style: normal;
            
            

        
            

    
            6. 

    
          6. 

        
            

            
            

            
            

        
            

        
            

            
            
                }
            
            

        
            

    
            7. 


          

          

          
    4、配置webpack.base.conf.js 文件

          

          
    
          

          

          
    5、App.vue引入字體

          

          
    
          

          

          
    6、可在body中設置字體

          

          

            

    
          1. 

        
            

            
            

            
            

        
            

        
            

            
            
                body{
            
            

        
            

    
            2. 

    
          2. 

        
            

            
            

            
            

        
            

        
            

            
            
                font-family: FZCYJ;
            
            

        
            

    
            3. 

    
          3. 

        
            

            
            

            
            

        
            

        
            

            
            
                }
            
            

        
            

    
            4. 


          

          

          
     
          
或者
          

          
    
          
        1、UI設計圖有"華文黑體"，擔心客戶端沒有該字體，將"huawen.ttf"字體文件，放入項目中：
    
          
    
          
        
    
          
    
          
        2、創建一個font.scss（或font.css）文件：
    
          
    
          

          1 @font-face { 2  font-family: 'huawen'; //重命名字體名 3  src: url('huawen.ttf'); //引入字體 4  font-weight: normal; 5  font-style: normal; 6 }
          
    
          
    
          
        3、在main.js中引入
    
          
    
          

          import '@/common/css/font.scss';
          
    
          
    
          
        4、就可以直接使用了：
    
          
    
          

          div { font-family: 'huawen';
}
          
    
          
    
          
         
          
        
          
            藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
        
          
文章來源：csdn + 博客園
        
          
            分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          
          
        
          
        
          
            藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
        
          
    
          

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合