CSS怎么在项目里引入自定义字体(@font-face)
前言:
以前我一直用内置的默认字体给文字设置字体,直到一天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)的更多相关文章
- java 引入自定义字体font后出现的硬盘吃光的问题
有个需求要用美术字体在图片上写字 用自定义的文字有两个方法: 1. Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream ...
- 如何在TypeScript/JavaScript项目里引入MD5校验和
摘要:MD5校验和则是其中一种数学算法,通常是使用工具对文件计算得出的一组32 个字符的十六进制字母和数字. 本文分享自华为云社区<TypeScript/JavaScript项目里如何做MD5校 ...
- css 之引入自定义字体/特殊字体-----使用ttf格式语言包
1.准备好需要的 .ttf 格式的语言包,在css导入: @font-face { font-family: myFont; src: url('../assets/font/Oswald-SemiB ...
- 脚手架搭建的vue项目里引入jquery和bootstrap
引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.j ...
- vue项目中引入特殊字体
特殊字体指的是默认电脑中没有的 1.下载字体 2.新建文件夹font,把字体放进去 3.新建font.css 4.使用@font-face设置字体 @font-face { font-family: ...
- Vue项目里添加特殊字体或 某些字体乱码的问题
问题:有个西藏的项目因使用藏文,而出现乱码 (一开始不乱的,不知道后台怎么处理...后来不知道为啥,前端乱码了) 解决:字体ttf 格式已下载,在项目中全局引入了 @font-face { font- ...
- 在一个已经使用mybatis的项目里引入mybatis-plus,结果不能共存
mybatis-plus版本号:3.0.6 问题产生原因: 原有的项目使用的是springboot+mybatis的框架,一切接口服务均没有问题.由于新的需求增加shiro权限认证,然后也在考虑用my ...
- java 图片合成文字或者awt包下的对话框引入自定义字体库
成就卡图片字体问题:1.下载 xxx.ttf 文件2.mkdir /usr/local/jdk1.6.0_11/jre/lib/fonts/fallback. 在jre/lib/fonts 下 ...
- 为什么SpringBoot项目里引入其他依赖不要写版本号
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> < ...
随机推荐
- GitHub上受欢迎的Android UI Library
GitHub上受欢迎的Android UI Library 内容 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayout 图标 下拉刷新 Vi ...
- 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 ...
- Mac Segmentation fault: 11
同样一份代码,在windows10编译运行都没问题.但在mac上运行报Segmentation fault: 11错误. 原因是有指针被定义但是没有分配空间便传入函数,如 double *x; 因为M ...
- 今日头条Marketing API小工具(.Net Core版本)
前言 由于工作原因,需要用到今日头条的Marketing API做一些广告投放的定制化开发.然后看现在网上也没多少关于头条Marketing API的文章,于是便就有了该篇文章. 头条Marketin ...
- 记一次Hbase的行键过滤器事故问题
数据总数:746条数据 因为后面需要进行算法合成,而且spark目前对这种算法支持并不好,因此采用代码编写,所以在查询hbase的过程中采用的是java直接查询, 但是为了加快查询速度,我尽可能的使用 ...
- UOJ#206. 【APIO2016】Gap 构造 交互题
原文链接www.cnblogs.com/zhouzhendong/p/UOJ206.html 题解 T = 1 的情况直接大力从两边向中间询问即可. T = 2 的情况挺妙的,我没想到. 考虑首先花费 ...
- hdu6489 2018 黑龙江省大学生程序设计竞赛j题
Problem Description Kayaking is playing a puzzle game containing n different blocks. He marks the bl ...
- redis的雪崩与穿透原理的浅理解
首先列一下主要说什么, 1.什么是Redis缓存的雪崩? 2.什么是Redis缓存的穿透? 3.Redis缓存崩溃会怎么样? 4.怎么预防Redis缓存崩溃? 1.什么是Redis缓存的雪崩? 举个栗 ...
- HDU 2204 Eddy's 爱好 (容斥原理)
<题目链接> 题目大意: Ignatius 喜欢收集蝴蝶标本和邮票,但是Eddy的爱好很特别,他对数字比较感兴趣,他曾经一度沉迷于素数,而现在他对于一些新的特殊数比较有兴趣. 这些特殊数是 ...
- python-关于字典与列表的一个作业
题目是这样的: 给定一个字典dict1,将其转换成dict2: dict1 = { 'fetal':[{u'key': u'sjzx_sy22_121.201.56.5', u'doc_count': ...