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> < ...
随机推荐
- Django组件之用户认证组件
一.auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1.1 .authenticate( ...
- Security配置文件的基本配置及参数名详解
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
- 下拉框、下拉控件之Select2。自动补全的使用
参考链接: 参考一:https://blog.csdn.net/weixin_36146275/article/details/79336158 参考二:https://www.cnblogs.com ...
- Explanation About Initilizing A DirextX3D Class 关于初始化Direct3D类的解释
目录 DirectX11 Study Note Create a DirectX graphics interface factory.创建一个DirectX图形界面工厂 CreateDXGIFact ...
- vue-router 去掉#
vue-router默认的路由模式是hash,我们要去掉url中的#需要将路由模式切换为history const router = new VueRouter({ mode: 'history', ...
- 《连载 | 物联网框架ServerSuperIO教程》- 16.集成OPC Server,及使用步骤。附:3.3 发布与版本更新说明。
1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...
- 我把一些Linux的中英文命令做了对应翻译大家参考一下
本文我们把Linux的中英文命令做了对应翻译,给需要的朋友参考一下.(http://wap.0834jl.com) 很多朋友在论坛上找Linux英文命令,我们给大家整理了比较全的Linux英文命令,并 ...
- Spark实战
实战 数据导入Hive中全量: 拉链增量:用户.商品表数据量大时用 拉链表动作表 增量城市信息 全量 需求一: 获取点击.下单和支付数量排名前 的品类 ①使用累加器: click_category_i ...
- 032 Java再次总结
1.大纲 多线程怎么用的,线程池,事务,传播机制与隔离级别,反射,泛型,数据库引擎的区别,数据库merge,窗口函数,fastJson,JVM调优,GC钩子,Linux的awk,shell,HashM ...
- python文件的路径问题补充上一篇内容
上次的路径问题还没解决就被勒索病毒的木马器给搞了两周多, 拖拖拖到现在又开始纠结路径问题...还是学习能力不足啊... 补充一下路径问题的知识, 毕竟jupyter notebook跟IDE测试的时候 ...