现在很多设计用的字体都是五花八门的。我们切图又不能很好的让搜索爬虫搜索。就会使用@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 的用法的更多相关文章

  1. [转载：Q1mi]Bootstrap和基于Bootstrap的登录验证示例

    转载自:Q1mi Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支 ...

  2. WEB入门一 网页设计基础

    本章简介 在当今社会,网页是网络信息共享和发布的主要形式.而HTML (Hyper Text Mark-up Language),即超文本标记语言,是创建网页基础.本章将学习HTML文档的基本结构.组 ...

  3. C#基础教程/适合初学者

    C#基础教程 第一章       C#语言基础 本章介绍C#语言的基础知识,希望具有C语言的读者能够基本掌握C#语言,并以此为基础,能够进一步学习用C#语言编写window应用程序和Web应用程序.当 ...

  4. C#编程兵书

    <C#编程兵书> 基本信息 作者: 张志强 胡君 丛书名: 程序员藏经阁 出版社:电子工业出版社 ISBN:9787121207402 上架时间:2013-8-26 出版日期:2013 年 ...

  5. css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

    Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...

  6. Font Awesome字体图标的 用法, 很简单

    http://fontawesome.dashgame.com/ 上面是 官网,  可下载,也可以CDN. 1...  加载 2...  用法

  7. 【Java学习】Font字体类的用法介绍

    一.Font类简介 Font类是用于设置图形用户界面上的字体样式的,包括字体类型(例如宋体.仿宋.Times New Roman等).字体风格(例如斜体字.加粗等).以及字号大小. 二.Font类的引 ...

  8. 转载 NPOI.dll 用法。单元格，样式，字体，颜色，行高，宽度。读写excel

    我用的版本是1.25的.每个版本用法有一点不同 using System; using System.Collections.Generic; using System.ComponentModel; ...

  9. Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF

    1.常见用法           using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...

  10. Solr学习总结（六）SolrNet的高级用法（复杂查询，分页，高亮，Facet查询）

    上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了.没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的 ...

随机推荐

  1. 可以结合react的ui组件

    https://ant.design/components/switch-cn/

  2. ireport5.6+jasperreport6.3开发（二）--web开发的配置

    ireport5.6只能编译出*.jasper的报表包,最终报表需要被输出为一个doc html pdf excel等文件,这时就需要jasperreport6.5的库进行配合了. jasperrep ...

  3. AndroidStudio NDK配置使用以及错误集合

    Error:Execution failed for task ':app:transformNative_libsWithStripDebugSymbolForDebug'. > java.l ...

  4. MySQL学习记录--操作时间数据

    1.返回日期的时间函数 date_add() : 可以为指定日期增加/减少任意一段时间间隔.下面举例将当前日期增加一个月和减少一个月 mysql month) as add_one_month; +- ...

  5. javascript 提取表单元素生成用于提交的对象（序列化 html 表单）

    function serialize(f) { var o = {}; var s = f.getElementsByTagName("select"); for (var i = ...

  6. zend create project prepare

    1.php ini 安装pear 设置include_path 2.apache AllowOverride LoadModule rerwite去掉注释 <VirtualHost *:> ...

  7. java通过文件路径读取该路径下的所有文件并将其放入list中

    java通过文件路径读取该路径下的所有文件并将其放入list中   java中可以通过递归的方式获取指定路径下的所有文件并将其放入List集合中.假设指定路径为path,目标集合为fileList,遍 ...

  8. 20169212《Linux内核原理与分析》第六周作业

    视频学习 一.用户态.内核态和中断 内核态:处于高的执行级别下,代码可以执行特权指令,访问任意的物理地址,这时的CPU就对应内核态 用户态:处于低的执行级别下,代码只能在级别允许的特定范围内活动.在日 ...

  9. ubuntu 下非交互式执行远程shell命令

    apt-get install sshpass sshpass -p **your_password** ssh -o StrictHostKeyChecking=no "root@$ip& ...

  10. struts2+spring+hibernte整合示例

    简单实现添加用户功能,仅供初学者参考,可自行扩展程序功能(增删改查). 这里贴下代码,需要的可以下载看(因为比较懒). applicationContext.xml <?xml version= ...