Windows10操作系统使用实例：

1.准备好对应格式的字体库

2.方正字体使用实例

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <style>

        @font-face {

            font-family: 'fzbold';

            /*IE浏览器支持的字体类型，但是会渲染延迟*/

            src: url('../Fonts/方正粗活意简体.eot');

            src: url('../Fonts/方正粗活意简体.eot#iefix') format('embedded-opentype'),

            /*Google 浏览器，火狐浏览器支持的字体类型*/

            url('../Fonts/方正粗活意简体.ttf') format('truetype');

        }

        @font-face {

            font-family: 'seymourone';

            src: url('../Fonts/seymourone-regular.eot') format('embedded-opentype');

        }

        .txtOne {

            font: normal 25px 'fzbold';

            border: 1px solid red;

            padding: 10px;

        }

        .txtTwo {

            font: bold 25px;

            font-family: seymourone,宋体;

            border: 1px solid red;

            padding: 10px;

        }

    </style>

</head>

<body>

    <p class="txtOne">中文内容</p>

    <br />

    <p class="txtTwo">abc</p>

</body>

</html>

IE下显示结果：

Google/FF下显示结果：

Android系统下的浏览器访问：

3.花纹行楷字体使用：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <style>

        @font-face {

            font-family: '华文行楷';

            src: url('../Fonts/华文行楷.eot') format('embedded-opentype'), url('../Fonts/华文行楷.ttf') format('truetype');

        }

        .txtOne {

            font: normal 25px '华文行楷';

            border: 1px solid red;

            padding: 10px;

        }

        .txtTwo {

            font: bold 25px;

            font-family: 华文行楷,宋体;

            border: 1px solid red;

            padding: 10px;

        }

    </style>

</head>

<body>

    <p class="txtOne">中文内容</p>

    <br />

    <p class="txtTwo">abc</p>

</body>

</html>

IE/Google/FF显示结果：

CSS3 @font-face使用实例的更多相关文章

  1. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  2. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  3. html5+css3 微信开发-学习实例

    例子1.控制数据只显示两行并且最后使用省略号 样式如下: .ControlDataRows{ overflow : hidden; text-overflow: ellipsis; display: ...

  4. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  5. CSS3 flexbox弹性布局实例

    常用例子 1.居中对齐 <!DOCTYPE html> <head> <meta charset="utf-8"> <style type ...

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

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

  7. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  8. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  9. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  10. HTML5与CSS3实例教程(第2版) 附源码 中文pdf扫描版

    HTML5和CSS3技术是目前整个网页的基础.<HTML5与CSS3实例教程(第2版)>共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.这一版全面讲解了最新的HTML5和 ...

随机推荐

  1. eclipse问题解决（link方式安装插件失败）

    使用 link 方式,离线安装 eclipse 插件时,经常失败. 一.常见的失败情况 link方式配好后,eclipse 启动,没有弹出任何信息. 查看当前工作空间——.metadata——.log ...

  2. 延长FLASH和EEPROM芯片写入次数的小方法

    开发电子产品时,常常需要断电后保存某些数据,这就需要使用 FLASH或EEPROM芯片,这两种芯片,可擦除的次数是有限制的,通常FLASH为10万次,EEPROM要多一点,为100万甚至1000万次. ...

  3. hashCode() 和equals() 区别和作用

    HashSet和HashMap一直都是JDK中最常用的两个类,HashSet要求不能存储相同的对象,HashMap要求不能存储相同的键. 那么Java运行时环境是如何判断HashSet中相同对象.Ha ...

  4. 栈和队列的面试题Java实现

    栈和队列: 面试的时候,栈和队列经常会成对出现来考察.本文包含栈和队列的如下考试内容: (1)栈的创建 (2)队列的创建 (3)两个栈实现一个队列 (4)两个队列实现一个栈 (5)设计含最小函数min ...

  5. 【HDOJ】2531 Catch him

    简单BFS.就是要把所有的D点当成一个整体考虑(整体移动). /* 2531 */ #include <iostream> #include <queue> #include ...

  6. WordPress 3.5.1 crypt_private()远程拒绝服务漏洞(CVE-2013-2173)

    漏洞版本: WordPress 3.5.1 漏洞描述: BUGTRAQ ID: 60477 CVE(CAN) ID: CVE-2013-2173 WordPress是一种使用PHP语言和MySQL数据 ...

  7. 数据结构(主席树)：HDU 5654 xiaoxin and his watermelon candy

    Problem Description During his six grade summer vacation, xiaoxin got lots of watermelon candies fro ...

  8. HDOJ 1846 Brave Game

    Problem Description 十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中 ...

  9. VS2015接口智能提示少了异常信息 怎么破~

    问题:我想让VS2015提示的时候也显示关于“异常”的批注信息,亲们 如何破? 下图是VS3013的提示 下图是VS2015的提示 下图是接口注释

  10. JavaScript之作用域与作用域链

    今天是2016的第一天,我们得扬帆起航踏上新的征程了.此篇阐述JavaScript中很重要的几个概念:作用域与作用域链及相关知识点. 我们先从变量与作用域的行为关系开始讨论. 变量作用域 JavaSc ...