详解如何在css中引入自定义字体(font-face)


Posted in HTML / CSS onMay 17, 2018

为啥要用这个,要从做海报说起,那是一个风雨交加的夜晚。。。

好了不扯淡了,我们言归正传,为啥用他,因为浏览器没有字体呗。

那为啥要你告诉呢?我自己不会去w3cschool去看去学啊。是可以,但是我给你提供不是更快捷简便嘛

如何使用

@font-face{
     font-family: '字体名称随便起'; 
     src: url('../font/字体名称.eot');
     src:url('../font/字体名称.woff') format('woff'),
         url('../font/字体名称.ttf') format('truetype'),
         url('../font/字体名称.svg') format('svg');
}

//html中的代码中加一个h1或者其他的,里面写你自己想要的特殊文字

h1{font-size:36px; color:#ccc;font-family: "字体名称随便起";}

到这里就结束了感谢大家的观看(哎,能不能别扔鸡蛋破白菜的,我接着说接着说);

1、在哪里可以找到字体这个是关键,我会用但是没用字体还是然并卵啊。。

字体下载:https://3water.com/fonts/

这里可以找到一般我们系统中支持的字体下载后放到font文件夹中即可(font文件夹与css和images平级即可)

2、下载后的字体太大,这样就失去了性能性能性能(要不说事儿还不少)

解决方案:字蛛(可将字体需要的部分提取出来,一般也就几k,这样可以了吧)

字蛛官网:http://font-spider.org/

1)想要用到字蛛首先要安装node 或者有 git 也可以,作为前端这个没问题;

2)安装好之后就开始字蛛的安装,用命令行或git复制这句:npm install font-spider -g 你用淘宝镜像也行

3)漫长的等待,安装好后我们可以先检测下font-spider -V 看到出现版本号证明你已经安装成功,Nice。

4)记得把你下载好的好多兆的字体先放到我们刚才说的font文件夹中。

5)新建一个CSS样式表,定义字体,把下面的复制进去,输入你刚刚在font里命名的字体名称,这样字体的各种格式都定义好了。

@font-face{
     font-family: '字体名称随便起'; 
     src: url('../font/字体名称.eot');
     src:url('../font/字体名称.woff') format('woff'),
         url('../font/字体名称.ttf') format('truetype'),
         url('../font/字体名称.svg') format('svg');
}

//html中的代码中加一个h1或者其他的,里面写你自己想要的特殊文字

h1{font-size:36px; color:#ccc;font-family: "字体名称随便起";}

6)关键一步,就是生成自己需要的缩略字了,在git或node中输入font-spider+空格+路径 :font-spider ./demo/*.html

比如:

如果切盘在根目录可以直接 font-spider demo.html

font-spider C:\Users\13246\Desktop\cropper\demo.html

当然我这是演示具体还是看你电脑的路径哦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 HTML / CSS
CSS3实现多样的边框效果
May 04 #HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 #HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 #HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 #HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 #HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 #HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 #HTML / CSS
You might like
php strrpos()与strripos()函数
2013/08/31 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
Vue实现购物车功能
2017/04/27 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
深入理解Node module模块
2018/03/26 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python的面向对象思想分析
2015/01/14 Python
Python实现的Excel文件读写类
2015/07/30 Python
python3获取url文件大小示例代码
2019/09/18 Python
python语言是免费还是收费的?
2020/06/15 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
毕业生个人求职信范文分享
2014/01/05 职场文书
授权委托书怎么写
2014/04/03 职场文书
房产公证书样本
2015/01/23 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
食品安全责任书范本
2015/05/09 职场文书
董存瑞观后感
2015/06/11 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis