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. Html table 内容超出显示省略号

    内容超出显示省略号: <html> <style> table { table-layout: fixed; width: 100%; } table, th, td { bo ...

  2. 实际场景:UI、原型与实际不符;研发怼你,你要怎么办?-Dotest软件测试

    实际公司场景:UI.原型与实际不符:你提交的问题(bug),开发又开始怼你,遇到这种情况,你会怎么办?怎么沟通?(如下图) 解释:大部分公司都是这样,区别在于差异性有多大:做出来的东西大部分与设计.原 ...

  3. acwing 60. 礼物的最大价值

    地址 https://www.acwing.com/problem/content/56/ 在一个m×n的棋盘的每一格都放有一个礼物,每个礼物都有一定的价值(价值大于0). 你可以从棋盘的左上角开始拿 ...

  4. python第二次作业-titanic数据库练习

    一.读入titanic.xlsx文件,按照教材示例步骤,完成数据清洗. titanic数据集包含11个特征,分别是: Survived:0代表死亡,1代表存活Pclass:乘客所持票类,有三种值(1, ...

  5. spring注解实现事务

    码云: https://gitee.com/MarkPolaris/spring-transcation

  6. CSP2019游记(翻车记)

    Preface 也许是人生中最重要的一场比赛了(再进不了冬令营我就没了) 结果不论怎样,想必也都是人生中的一次分水岭吧 从暑假开始到今天的一段时间,自己似乎终于找到了学OI的动力与乐趣.能认识到更多志 ...

  7. vue中\$refs、\$emit、$on的使用场景

    1.$emit的使用场景 子组件调用父组件的方法并传递数据注意:子组件标签中的时间也不区分大小写要用“-”隔开 子组件: <template> <button @click=&quo ...

  8. 防止ssh暴力破解的小工具denyhosts

    DenyHosts 简介 DenyHosts 是 Python 语言写的一个程序软件,运行于 Linux 上预防 SSH 暴力破解的,它会分析 sshd 的日志文件(/var/log/secure), ...

  9. 2019_JAVA面试题_真实总结

    来自刚被某互联网公司录取的朋友的分享. 整理的面试题1: 1.Java里面有哪几种基础数据类型, 2.Char为何是两个字节, 3.Object有哪些方法 4.final修饰变量,函数,类的作用, 5 ...

  10. 关于Maven+Tomcat7下cannot be cast to javax.servlet.Servlet问题的解决办法

    今天在开发 JavaWeb 项目的时候,遇到了这么一个问题,这个错误是我在进行表单的异步提交的时候出现的.无法转化为 Servlet 经过我的一番检查之后!没有发现任何问题.... 注解配置无误 继承 ...