首页 技术 正文
技术 2022年11月23日
0 收藏 787 点赞 2,298 浏览 1241 个字

现在很多设计用的字体都是五花八门的。我们切图又不能很好的让搜索爬虫搜索。就会使用@font-face方法:

@Font-face目前浏览器的兼容性:

Webkit/Safari(3.2+):TrueType/OpenType TT (.ttf) 、OpenType PS (.otf);
•Opera (10+): TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg);
•Internet Explorer: 自ie4开始,支持EOT格式的字体文件;ie9支持WOFF;
•Firefox(3.5+): TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)
•Google Chrome:TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6
由上面可以得出:.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持。

在这里介绍一个网站,专门用于将字体转格式的在线网站。

http://www.fontsquirrel.com/tools/webfont-generator

在网站将字体上传,然后转换下载就可以使用了。

<style>        @font-face {                    font-family: 'kunstler_scriptregular';                    src: url('font/kunstler-webfont.eot');                    src: url('font/kunstler-webfont.eot?#iefix') format('embedded-opentype'),                         url('font/kunstler-webfont.woff2') format('woff2'),                         url('font/kunstler-webfont.woff') format('woff'),                         url('font/kunstler-webfont.ttf') format('truetype'),                         url('font/kunstler-webfont.svg#kunstler_scriptregular') format('svg');                    font-weight: normal;                    font-style: normal;                }        .new{            font-family:kunstler_scriptregular;        }        *{            font-size:30px;        }    </style></head><body>        <ul>            <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">首页</a></li>            <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">关于我们</a></li>            <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">登录注册</a></li>            <li class="new"><a>you are pig</a></li>        </ul></body>

截图:

@font-face 的用法

转换界面

@font-face 的用法

下载到本地解压后

@font-face 的用法

实际效果

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141301.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:7,140
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:4,476
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:566 阅读:5,286
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:5,162
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:6,335
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,873