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. SQL Server 查询某一个数据库存储过程、函数是否包含某一个内容或者脚本

    SELECT obj.Name 名称, sc.TEXT 内容FROM syscomments scINNER JOIN sysobjects obj ON sc.Id = obj.IDWHERE sc ...

  2. Tcp连接和断开

    三次握手:客户端为a,服务端为b:开始都是closed状态:a主动打开进入到syn_sent状态,b被动打开进入listen状态:第一次握手,a向b发送SYN=1,seq为x的包,b收到以后进入syn ...

  3. Re-DD-Hello

    题目地址 https://dn.jarvisoj.com/challengefiles/1.Hello.12b9bde7c0c8558a9da42aa1798cafc8 用IDA打开,找到算法函数 写 ...

  4. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  5. 实例调用(__call__())

    任何类,只需要定义一个__call__()方法,就可直接对实例进行调用 对实例进行直接调用就好比对一个函数进行调用一样 __call__()还可定义参数,所以调用完全可以把对象看成函数,把函数看成对象 ...

  6. Zookeeper集群的"脑裂"问题处理 - 运维总结

    关于集群中的"脑裂"问题,之前已经在这里详细介绍过,下面重点说下Zookeeper脑裂问题的处理办法.ooKeeper是用来协调(同步)分布式进程的服务,提供了一个简单高性能的协调 ...

  7. ansible小结(八)ansible-playbook简单使用

    ansbile-playbook是一系统ansible命令的集合,其利用yaml 语言编写,运行过程,ansbile-playbook命令根据自上而下的顺序依次执行.同时,playbook开创了很多特 ...

  8. 图解servlet

    You can see the following illustration to better understand the lifecycle of the Servlet. When the r ...

  9. node.js箭头函数使用

    ES6允许使用=>定义函数,箭头函数使得表达更加简洁,例如 // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1 ...

  10. Maven的assembly插件在linux启动卡住Starting the localhost.localdomain

    1.今天在测试assembly的时候,在Linux虚拟机,内存配置为512mb,然后开始在Linux上运行assembly的时候就会一直卡住  2.停止运行后,查看了下日志 [root@localho ...