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. Django 模板变量之 forloop

    1. 模板变量之forloop.counter:从1开始自增1 模板代码如下: {% for row in v %} <tr> <td>{{forloop.counter}}& ...

  2. VMWare ESX server安装

    和装普通虚拟机是一样的 需要添加两块网卡. F11同意协议 直接回车即可‘ 选择字符集 输入密码 按F11安装系统 按回车键重启 按F2 配置网络管理 启用两块网卡,按回车确定 配置IPV4地址 用空 ...

  3. 【攻防世界】高手进阶 pwn200 WP

    题目链接 PWN200 题目和JarvisOJ level4很像 检查保护 利用checksec --file pwn200可以看到开启了NX防护 静态反编译结构 Main函数反编译结果如下 int ...

  4. ACWING 95 费解的开关 解题记录

    你玩过“拉灯”游戏吗?25盏灯排成一个5x5的方形.每一个灯都有一个开关,游戏者可以改变它的状态.每一步,游戏者可以改变某一个灯的状态.游戏者改变一个灯的状态会产生连锁反应:和这个灯上下左右相邻的灯也 ...

  5. Sigma Function (LightOJ - 1336)【简单数论】【算术基本定理】【思维】

    Sigma Function (LightOJ - 1336)[简单数论][算术基本定理][思维] 标签: 入门讲座题解 数论 题目描述 Sigma function is an interestin ...

  6. linux shell攻略学习笔记二

    1.Cat命令 这么多命令,常用的 Cat –n file  显示文件以及行数 Cat - echo 'Text through stdin' | cat - file.txt Text throug ...

  7. IT兄弟连 Java语法教程 算符运算符

    Java提供了丰富的运算符环境.可以将大部分Java运算符划分为4组:算术运算符.位运算符.关系运算符以及逻辑运算符.Java还定义了一些用于处理某些特定情况的附加运算符.本章将介绍除类型比较运算符i ...

  8. 【Linux命令】centos防火墙使用和配置

    目录 firewalld iptables Linux中的防火墙(iptables,firewalld,ip6tables,ebtables).这些软件本身并不具备防火墙功能,他们的作用都是在用户空间 ...

  9. 【广州.NET社区推荐】.NET Core Q&A - ORM

    Object/Relational Mapping(ORM) 作为开发工作中非常重要的组件,重量级.轻量级.简单的.复杂的 各种各样有很多种适应不同的业务场景,但这些组件分散在网络世界的各个角落,寻找 ...

  10. c#微信公众号开发一----基本设置,服务器配置token验证,获取timestamp/nonce/signature

    一.c#微信公众号开发----基本设置 参考微信官方文档 https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Acce ...