@font-face 的用法
现在很多设计用的字体都是五花八门的。我们切图又不能很好的让搜索爬虫搜索。就会使用@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="#" target="_blank">首页</a></li> <li><a href="#" target="_blank">关于我们</a></li> <li><a href="#" target="_blank">登录注册</a></li> <li class="new"><a>you are pig</a></li> </ul> </body>
截图:
转换界面
下载到本地解压后
实际效果
@font-face 的用法的更多相关文章
- [转载:Q1mi]Bootstrap和基于Bootstrap的登录验证示例
转载自:Q1mi Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支 ...
- WEB入门一 网页设计基础
本章简介 在当今社会,网页是网络信息共享和发布的主要形式.而HTML (Hyper Text Mark-up Language),即超文本标记语言,是创建网页基础.本章将学习HTML文档的基本结构.组 ...
- C#基础教程/适合初学者
C#基础教程 第一章 C#语言基础 本章介绍C#语言的基础知识,希望具有C语言的读者能够基本掌握C#语言,并以此为基础,能够进一步学习用C#语言编写window应用程序和Web应用程序.当 ...
- C#编程兵书
<C#编程兵书> 基本信息 作者: 张志强 胡君 丛书名: 程序员藏经阁 出版社:电子工业出版社 ISBN:9787121207402 上架时间:2013-8-26 出版日期:2013 年 ...
- css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法
Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...
- Font Awesome字体图标的 用法, 很简单
http://fontawesome.dashgame.com/ 上面是 官网, 可下载,也可以CDN. 1... 加载 2... 用法
- 【Java学习】Font字体类的用法介绍
一.Font类简介 Font类是用于设置图形用户界面上的字体样式的,包括字体类型(例如宋体.仿宋.Times New Roman等).字体风格(例如斜体字.加粗等).以及字号大小. 二.Font类的引 ...
- 转载 NPOI.dll 用法。单元格,样式,字体,颜色,行高,宽度。读写excel
我用的版本是1.25的.每个版本用法有一点不同 using System; using System.Collections.Generic; using System.ComponentModel; ...
- Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF
1.常见用法 using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...
- Solr学习总结(六)SolrNet的高级用法(复杂查询,分页,高亮,Facet查询)
上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了.没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的 ...
随机推荐
- Android之Dialer之紧急号码
Android之Dialer之紧急号码 e over any other (e.g. supplementary service related) number analysis. a) 112 an ...
- js 获取URL传递过来的值
URL: http://127.0.0.1:8080/jspews/pews/inspection/InspectCheckCard.jsp?checkDate=2015-03-31 传递的值: ch ...
- class命名
常见class关键词: 布局类:header, footer, container, main, content, aside, page, section 包裹类:wrap, inner 区块类:r ...
- Python学习笔记之字典
一.创建和使用字典 1.创建字典 phonebook={'Alice':'2341','Beth':'9102','Cecil':'3258'} 2.dict,通过映射创建字典 >>> ...
- 解决eclipse之ADT与SDK版本不一致问题
This Android SDK requires Android Developer Toolkit version … .Please update ADT to the latest versi ...
- Java之数组了解
一.什么是数组 数组可以理解为是一个巨大的“盒子”,里面可以按顺序存放多个类型相同的数据, 比如可以定义 int 型的数组 scores 存储 4 名学生的成绩: int[] scores={76,8 ...
- 数字图像处理作业使用OpenCV - 自定义直方图
第二次作业需要打印出来灰度直方图,当然不能使用ocv的自带calcHist函数来得到Mat对象了……结果上网搜索怎么用自己的数据创建直方图,搜到的都是直接用函数的_(:з」∠)_ 结果这个地方拖了好久 ...
- Z表数据EXCEL导入
很多项目都有这种需求,虽然别人用的各有不同,不过闲来无事,还是自己搞了一个出来.基于EXCEL的导入. *&------------------------------------------ ...
- SAP语音读汉字
厉害了,WORD哥! 输入汉字,竟然可以读出来... 这真是变态用户必备神技啊 REPORT ZLYTEST001. INCLUDE OLE2INCL. DATA: OLE TYPE OLE2_OBJ ...
- 【思路】-OctService服务类
OctService服务类 从以下几个方面来说吧,这次说的会有点长啊 设计: 思路: 作用: 目的: 问题: 为什么要设计这个? 它解决了什么问题? 是什么? 为什么? 怎么样? OctService ...