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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

分享本文至：
« echarts分割线变虚线 input中提示语得颜色 + input 标签实现输入框带提示文字效果(两种方法) »

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档