现在很多设计用的字体都是五花八门的。我们切图又不能很好的让搜索爬虫搜索。就会使用@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. 【图像】Matlab图像标定工具箱

    参考教程: Matlab工具箱教程  http://www.vision.caltech.edu/bouguetj/calib_doc/ 摄像机模型  http://oliver.zheng.blog ...

  2. jQuery正则的使用方法步骤详解

    本文主要和大家分享的就是jQuery学习中正则的使用,正则在jquery里面并没有比javascript多哪些知识,基本上是一样的,只是选择器更好了一点,一起来看看吧. 基础正则 1.正则表达式的创建 ...

  3. $.unique()去重问题

    var yearArray = new Array(2009, 2009, 2010, 2010, 2009, 2010);$.unique(yearArray); 返回 2009, 2010, 20 ...

  4. 【JAVA】【leetcode】【使用堆栈实现后向计算】

    题目:evaluate-reverse-polish-notation 要求: Evaluate the value of an arithmetic expression in Reverse Po ...

  5. css学习笔记 5

    将css引入到html页面中的方法: 用style属性设置样式 用<style>标签设置样式 用<link>标签引入外部样式文件 用@import引入外部样式文件 <li ...

  6. hihocoder-平衡树·SBT

    http://hihocoder.com/problemset/problem/1337 #1337 : 平衡树·SBT 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 ...

  7. 常用C# DateTime 日期计算

    //今天 DateTime.Now.Date.ToShortDateString(); //昨天,就是今天的日期减一 DateTime.Now.AddDays(-1).ToShortDateStrin ...

  8. SharePoint 2013 List 备份使用

    在测试环境新建List后经过不懈的调整,验证终于做出一个像模像样的表单. 这时候问题来... 要怎么迁移到生产环境或者正式环境呢? 在网上找了一些资料,不过都是10的.. 其实想想13跟10区别不大, ...

  9. Python 爬取所有51VOA网站的Learn a words文本及mp3音频

    Python 爬取所有51VOA网站的Learn a words文本及mp3音频 #!/usr/bin/env python # -*- coding: utf-8 -*- #Python 爬取所有5 ...

  10. Linux Shell 学习总结

    1. -bash: ./dd.sh: /bin/bash^M: bad interpreter: 没有那个文件或目录 当出现上面这问题的时候,首先看你的.profile 里面是否配置对了,一般配置为: ...