详解如何在css中引入自定义字体(font-face)
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
为啥要用这个,要从做海报说起,那是一个风雨交加的夜晚。。。
好了不扯淡了,我们言归正传,为啥用他,因为浏览器没有字体呗。
那为啥要你告诉呢?我自己不会去w3cschool去看去学啊。是可以,但是我给你提供不是更快捷简便嘛
如何使用
1 2 3 4 5 6 7 8 9 10 11 | @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中的代码中加一个h 1 或者其他的,里面写你自己想要的特殊文字 h 1 { font-size : 36px ; color : #ccc ; font-family : "字体名称随便起" ;} |
到这里就结束了感谢大家的观看(哎,能不能别扔鸡蛋破白菜的,我接着说接着说);
1、在哪里可以找到字体这个是关键,我会用但是没用字体还是然并卵啊。。
字体下载:https://www.jb51.net/fonts/
这里可以找到一般我们系统中支持的字体下载后放到font文件夹中即可(font文件夹与css和images平级即可)
2、下载后的字体太大,这样就失去了性能性能性能(要不说事儿还不少)
解决方案:字蛛(可将字体需要的部分提取出来,一般也就几k,这样可以了吧)
1)想要用到字蛛首先要安装node 或者有 git 也可以,作为前端这个没问题;
2)安装好之后就开始字蛛的安装,用命令行或git复制这句:npm install font-spider -g 你用淘宝镜像也行
3)漫长的等待,安装好后我们可以先检测下font-spider -V 看到出现版本号证明你已经安装成功,Nice。
4)记得把你下载好的好多兆的字体先放到我们刚才说的font文件夹中。
5)新建一个CSS样式表,定义字体,把下面的复制进去,输入你刚刚在font里命名的字体名称,这样字体的各种格式都定义好了。
1 2 3 4 5 6 7 8 9 10 11 | @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中的代码中加一个h 1 或者其他的,里面写你自己想要的特殊文字 h 1 { 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
当然我这是演示具体还是看你电脑的路径哦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- CSS3中的font-face可以将我们上传的自定义的字体显示出来,有时比如我们要显示英文音标的字体时便需要用到,本文就整理了一下使用CSS3的font-face字体嵌入样式的方法讲解,需2016-05-13
- 本文介绍了css3的属性@font-face的使用方法,以及在@fant-face中使用字体化图标,有相同需求的小伙伴,自己参考下。2014-12-12
- 这篇文章主要介绍了css3 自定义字体font-face使用,需要的朋友可以参考下2014-05-14
- 喜欢网页布局的朋友对font-face并不陌生吧,使其可以改变网页字体,下面有个不错的示例,大家可以参考下2014-02-10
- 传说中的CSS3基本上什么都可以,那么CSS3中可不可以自定义英文字体呢?答案是非常可以。用@font-face即可实现自定义英文字体,下面有个不错的示例,感兴趣的朋友可以了解下2013-09-23
- @font-face 是一个css2的一个语法,它允许你在网页上显示一个自定义的字体,下面为大家介绍下@font-face的基本用法,以及在所有浏览器都能使用的方法,感兴趣的朋友可以参2013-07-04
- 用css来实现三角箭头,虽然达到需要的效果了,但还是有一些问题,比如依旧需要靠position来定位箭头的位置,目前也只能实现三角箭头,若想用一些其他的字符,还是得用图片,2013-04-01
什么是@font-face及font-face如何在css中使用
@ font-face的是一个CSS规则,允许你输入自己的字体出现在网站上,即使在特定的字体在访问者的计算机上没有安装,它也可以办得到,在使用字体方面它真的很重要,您可以使用任2013-02-26- 下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。2009-12-11
最新评论