前言:

    以前我一直用内置的默认字体给文字设置字体,直到一天UI妹纸给了我下面的字体

      

     当时我是蒙蔽的,这个字体的效果如下

     

     默认字体并无该字体,直接设置是没有效果的,这时就需要用到自定义字体了

    下面我来简单介绍一下添加自定义字体的方法

  添加自定义字体:

    ①:首先需要下载所需字体

        推荐该下载字体网站:https://www.fontke.com/

    ②:把下载字体文件放入 font文件夹里(建议font文件夹与 css 和 image文件夹平级))

       

     ③:引入字体(可直接在html文件里用@font-face引入字体,如下图,分别是字体名字和路径)

      

       这样就可以直接给需要设置此字体的文字设置该字体了,如下图

        

      就当我以为完美解决时,一个问题浮出水面:英文和数字还好,但中文字体体积太大,一般都是好几兆

      比如我下载的这个字体就有4M多

     

     对于PC端可能都还好,如果是移动端,对性能的影响无法想象

     那怎么解决这个棘手的问题呢?答案是使用字体蜘蛛进行压缩

     可参考:

             https://www.jianshu.com/p/976d95fb87a7 (我是参考该文章设置自定义字体的)

         https://github.com/aui/font-spider/blob/master/README-ZH-CN.md   (字体蜘蛛官网及github)

          

               

     

   

CSS怎么在项目里引入自定义字体(@font-face)的更多相关文章

  1. java 引入自定义字体font后出现的硬盘吃光的问题

    有个需求要用美术字体在图片上写字 用自定义的文字有两个方法: 1. Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream ...

  2. 如何在TypeScript/JavaScript项目里引入MD5校验和

    摘要:MD5校验和则是其中一种数学算法,通常是使用工具对文件计算得出的一组32 个字符的十六进制字母和数字. 本文分享自华为云社区<TypeScript/JavaScript项目里如何做MD5校 ...

  3. css 之引入自定义字体/特殊字体-----使用ttf格式语言包

    1.准备好需要的 .ttf 格式的语言包,在css导入: @font-face { font-family: myFont; src: url('../assets/font/Oswald-SemiB ...

  4. 脚手架搭建的vue项目里引入jquery和bootstrap

    引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.j ...

  5. vue项目中引入特殊字体

    特殊字体指的是默认电脑中没有的 1.下载字体 2.新建文件夹font,把字体放进去 3.新建font.css 4.使用@font-face设置字体 @font-face { font-family: ...

  6. Vue项目里添加特殊字体或 某些字体乱码的问题

    问题:有个西藏的项目因使用藏文,而出现乱码 (一开始不乱的,不知道后台怎么处理...后来不知道为啥,前端乱码了) 解决:字体ttf 格式已下载,在项目中全局引入了 @font-face { font- ...

  7. 在一个已经使用mybatis的项目里引入mybatis-plus,结果不能共存

    mybatis-plus版本号:3.0.6 问题产生原因: 原有的项目使用的是springboot+mybatis的框架,一切接口服务均没有问题.由于新的需求增加shiro权限认证,然后也在考虑用my ...

  8. java 图片合成文字或者awt包下的对话框引入自定义字体库

    成就卡图片字体问题:1.下载 xxx.ttf 文件2.mkdir /usr/local/jdk1.6.0_11/jre/lib/fonts/fallback.     在jre/lib/fonts 下 ...

  9. 为什么SpringBoot项目里引入其他依赖不要写版本号

    <dependencies> <dependency> <groupId>org.springframework.boot</groupId> < ...

随机推荐

  1. GitHub上受欢迎的Android UI Library

    GitHub上受欢迎的Android UI Library 内容 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayout 图标 下拉刷新 Vi ...

  2. Macro For Creating a dwStyle for a window without a menu bar and title bar

    Introduce For CreateWindowEx Creates an overlapped, pop-up, or child window with an extended window ...

  3. Mac Segmentation fault: 11

    同样一份代码,在windows10编译运行都没问题.但在mac上运行报Segmentation fault: 11错误. 原因是有指针被定义但是没有分配空间便传入函数,如 double *x; 因为M ...

  4. 今日头条Marketing API小工具(.Net Core版本)

    前言 由于工作原因,需要用到今日头条的Marketing API做一些广告投放的定制化开发.然后看现在网上也没多少关于头条Marketing API的文章,于是便就有了该篇文章. 头条Marketin ...

  5. 记一次Hbase的行键过滤器事故问题

    数据总数:746条数据 因为后面需要进行算法合成,而且spark目前对这种算法支持并不好,因此采用代码编写,所以在查询hbase的过程中采用的是java直接查询, 但是为了加快查询速度,我尽可能的使用 ...

  6. UOJ#206. 【APIO2016】Gap 构造 交互题

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ206.html 题解 T = 1 的情况直接大力从两边向中间询问即可. T = 2 的情况挺妙的,我没想到. 考虑首先花费 ...

  7. hdu6489 2018 黑龙江省大学生程序设计竞赛j题

    Problem Description Kayaking is playing a puzzle game containing n different blocks. He marks the bl ...

  8. redis的雪崩与穿透原理的浅理解

    首先列一下主要说什么, 1.什么是Redis缓存的雪崩? 2.什么是Redis缓存的穿透? 3.Redis缓存崩溃会怎么样? 4.怎么预防Redis缓存崩溃? 1.什么是Redis缓存的雪崩? 举个栗 ...

  9. HDU 2204 Eddy's 爱好 (容斥原理)

    <题目链接> 题目大意: Ignatius 喜欢收集蝴蝶标本和邮票,但是Eddy的爱好很特别,他对数字比较感兴趣,他曾经一度沉迷于素数,而现在他对于一些新的特殊数比较有兴趣. 这些特殊数是 ...

  10. python-关于字典与列表的一个作业

    题目是这样的: 给定一个字典dict1,将其转换成dict2: dict1 = { 'fetal':[{u'key': u'sjzx_sy22_121.201.56.5', u'doc_count': ...