现在很多设计用的字体都是五花八门的。我们切图又不能很好的让搜索爬虫搜索。就会使用@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. SQL Server Reporting Service(SSRS) 第二篇 SSRS数据分组Parent Group

    SQL Server Reporting Service(SSRS) 第一篇 我的第一个SSRS例子默认使用Table进行简单的数据显示,有时为了进行更加直观的数据显示,我们需要按照某个字段对列表进行 ...

  2. .ashx datatable转excel

    using System;using System.Collections;using System.Collections.Generic;using System.Data;using Syste ...

  3. 配置项setOption -- title

    标题组件,包含主标题和副标题.在 ECharts 3 中可以存在任意多个标题组件,这在需要标题进行排版,或者单个实例中的多个图表都需要标题时会比较有用. title.show boolean [ de ...

  4. leetcode刷题全纪录（持续更新）

    2.Add Two Numbers 原题链接https://leetcode.com/problems/add-two-numbers/ AC解: public ListNode addTwoNumb ...

  5. SPSS中两种重复测量资料分析过程的比较

    在SPSS中,有两个过程可以对重复测量资料进行分析:一种是一般线性模型的重复度量:一种是混合线性模型,对于同样的数据资料,使用两种过程分析出的内容不大一样,注意是内容而不是结果,只要操作正确,结果应该 ...

  6. 常用shell

    常用shell命令 选项 参数 ctrl+alt+f(1-6)字符界面7图形界面 ls 列出当前目录 -a 查看文件的详细信息 -L 查看所有的文件 包括隐藏文件 pwd 查看当前的工作路径 cd 切 ...

  7. Sphinx Search 学习 (一)

    参考资料一:(中文)http://www.coreseek.cn/docs/coreseek_3.2-sphinx_0.9.9.html (官方)http://sphinxsearch.com/doc ...

  8. mysql数据库的导入导出

    当我们在操作数据库的时候,难免会遇到数据导入导出的一些操作,今天突然学到了这个知识点,特意来给大家分享. 我用的是data的这条数据 1.使用数据 mysql> use data; Databa ...

  9. 原生JS实现购物车功能

    html <div class="catbox"> <table id="cartTable"> <thead> <t ...

  10. Web自动化基础（一）使用Selenium定位元素

    什么是元素?我们知道网页上有什么内容显示出来,比如一个按钮,一个输入框,一张图片,都可以理解成元素,这些元素是由html代码构成的,比如图片可以用<img>标签来展示,一个输入框可以用&l ...