CSS中使用自定义字体,首先需要下载你需要的字体ttf或者otf文件

这里推荐一个网站:http://www.zitixiazai.org/

/********css中********/
@font-face{
font-family:'test' //自定义字体名称
src:url('') //自定义字体存在的路径
} /*给div设置自定义字体*/
div{
font-family:test;
}

有时网上下载的字体过大,网页加载过慢,需要进行压缩

1- 安装Node.js

2- CMD中执行npm install font-spider -g

3- CMD中进入到项目文件夹下,执行font-spider html文件名(也可以*html)

4- 项目下会生成一个.font-spider文件夹,该文件夹里面是所用到的字体压缩过后的字体文件

CSS自定义字体的实现,前端实现字体压缩的更多相关文章

  1. CSS 自定义字体

    移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue Android 默认中文字 ...

  2. CSS自定义多个字体引用

    在 HTML 中,提供给我们的默认字体有很多,但因为在电脑上安装的字体有限,所以很多时候不能呈现出和设计稿上一样的效果,这时候我们就需要使用 css3 提供的 @font-face 来实现个性化字体了 ...

  3. css自定义字体

    @font-face { font-family: 华文隶书; src: url( ../font/STLITI.eot ); /* IE */ src: url( ../font/STLITI.tt ...

  4. css 14-CSS3属性详解:Web字体

    14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...

  5. CSS为英文和中文字体分别设置不同的字体

    font-family的调用方法: div { font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px ...

  6. ICOMOON!强悍的WEB字体图标制造器/Web字体使用实例

    IcoMoon!一个可以通过个性化设置来创建自定义图标(字体)的生成器!也可以将SVG图片,转换成web字体 IcoMoon是一项免费的服务,通过使用不同设置使我们能够创建自定义的ICON图或ICON ...

  7. CSS自定义样式

    CSS自定义样式 1. 自定义字体 先将字体文件放到web服务器上,需要时自动下载到用户计算机上 属性:@font-face 例: @font-face{ font-family:myFont; sr ...

  8. 图标字体的使用(fontello.com)字体推荐及使用技巧

    网页设计中为了页面漂亮好看,图标是少不了,网页中使用的图标通常都是使用图片,使用图片图标的有很多弊端,如果你经常制作网页应该有一肚子埋怨. 使用图片图标的弊端 放大图标必须重新作图, 改变颜色必须开启 ...

  9. app 要求字体使用楷体,使用字体包

    1,下载字体包     http://www.3987.com/xiazai/6/fonts/36616.html#down 2.  studio中src\main\创建assets\fonts,存放 ...

  10. jquery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

随机推荐

  1. 个人的一点小愚见,java有什么优点和缺点

    java是一种面向对象的编程语言,优点是可移植性比较高,最初设计时就是本着一次编写到处执行设计的.可以开发各种应用程序和游戏,不过速度没有c++快,所以一般是不用java来编写应用程序和电脑游戏. j ...

  2. 201871010116-祁英红《面向对象程序设计(java)》第七周学习总结

    项目 内容 <面向对象程序设计(java)> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/ ...

  3. 设计模式-Adapter(结构型模式)针对第三方库 函数 接口不匹配的问题,分为类模式 与 对象模式 两种

    以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //****************************类模式的Adaptr*********************** ...

  4. Spring Batch基本概念

    Spring batch主要有以下部分组成: JobRepository     用来注册job的容器 JobLauncher             用来启动Job的接口 Job           ...

  5. 解决SQL Server中无管理员账户权限问题

    遇到忘记SQL Server管理员账户密码或管理员账户被意外删除的情况,如何在SQL Server中添加一个新的管理员账户?按一下步骤操作可添加一个windows账户到SQL Server中,并分配数 ...

  6. 【翻译】spring-data 之JdbcTemplate 使用

    文档 Jdbc的使用 基础的代码结构: 一个Application作为入口.IUserRepository和UserRepository作为具体的实现.applicationContext.xml定义 ...

  7. Pandas入门系列(一)-- Series

    Series的创建 ##数据分析汇总学习 https://blog.csdn.net/weixin_39778570/article/details/81157884 # 使用列表创建 >> ...

  8. 终端中的 zsh 和 bash-魔法切换

    常用ubuntu,这两个终端都装了,平时使用zsh比较方便,可是,有时候出现了问题,不知道是谁的问题时候,还要做一下切换操作的,怎么才能迅速切换呢? 要切换,首先要知道你现在使用的是什么,请看第一个命 ...

  9. 《细说PHP》第四版 样章 第18章 数据库抽象层PDO 7

    18.6  PDO对预处理语句的支持 在生成网页时,许多PHP脚本通常都会执行除参数外其他部分完全相同的查询语句.针对这种重复执行一个查询,但每次迭代使用不同参数的情况,PDO提供了一种名为预处理语句 ...

  10. vue实现页面跳转(简易版)

    1.用点击函数 <button class="btntop" @click="gootherpage">跳转页面</button> 函数 ...