详解如何在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 相关文章推荐
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
使用CSS实现音波加载效果
May 07 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 时间计算问题小结
2009/01/04 PHP
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
python+OpenCV实现图像拼接
2020/03/05 Python
解决django FileFIELD的编码问题
2020/03/30 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
scrapy头部修改的方法详解
2020/12/06 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
印度网上药店:1mg
2017/10/13 全球购物
市场营销专业推荐信
2013/11/03 职场文书
保荐人的岗位职责
2013/11/19 职场文书
战略合作意向书范本
2014/04/01 职场文书
学用政策心得体会
2014/09/10 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
2015年幼师工作总结
2015/04/28 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript