前言:

    以前我一直用内置的默认字体给文字设置字体,直到一天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. Django组件之用户认证组件

    一.auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1.1 .authenticate( ...

  2. Security配置文件的基本配置及参数名详解

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  3. 下拉框、下拉控件之Select2。自动补全的使用

    参考链接: 参考一:https://blog.csdn.net/weixin_36146275/article/details/79336158 参考二:https://www.cnblogs.com ...

  4. Explanation About Initilizing A DirextX3D Class 关于初始化Direct3D类的解释

    目录 DirectX11 Study Note Create a DirectX graphics interface factory.创建一个DirectX图形界面工厂 CreateDXGIFact ...

  5. vue-router 去掉#

    vue-router默认的路由模式是hash,我们要去掉url中的#需要将路由模式切换为history const router = new VueRouter({ mode: 'history', ...

  6. 《连载 | 物联网框架ServerSuperIO教程》- 16.集成OPC Server,及使用步骤。附:3.3 发布与版本更新说明。

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  7. 我把一些Linux的中英文命令做了对应翻译大家参考一下

    本文我们把Linux的中英文命令做了对应翻译,给需要的朋友参考一下.(http://wap.0834jl.com) 很多朋友在论坛上找Linux英文命令,我们给大家整理了比较全的Linux英文命令,并 ...

  8. Spark实战

    实战 数据导入Hive中全量: 拉链增量:用户.商品表数据量大时用 拉链表动作表 增量城市信息 全量 需求一: 获取点击.下单和支付数量排名前 的品类 ①使用累加器: click_category_i ...

  9. 032 Java再次总结

    1.大纲 多线程怎么用的,线程池,事务,传播机制与隔离级别,反射,泛型,数据库引擎的区别,数据库merge,窗口函数,fastJson,JVM调优,GC钩子,Linux的awk,shell,HashM ...

  10. python文件的路径问题补充上一篇内容

    上次的路径问题还没解决就被勒索病毒的木马器给搞了两周多, 拖拖拖到现在又开始纠结路径问题...还是学习能力不足啊... 补充一下路径问题的知识, 毕竟jupyter notebook跟IDE测试的时候 ...