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. 代码之美——Doom3源代码赏析2

    http://www.csdn.net/article/2013-01-17/2813778-the-beauty-of-doom3-source-code/2 摘要:Dyad作者.资深C++工程师S ...

  2. WAMP集成环境

    WAMP Windows下的Apache+Mysql/MariaDB+Perl/PHP/Python,一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立的程序,但是因为常被放在一起使用,拥有 ...

  3. ESXI转HYPER-V，问题接二连三啊（VMDK转VHD）

    首先说软件: 要不是用SCVMM来转的话,我用得最爽的还是WINIMAGE,自然流畅.其它的都有各种问题. 其次说说配置更改: 如果原ESXI里只有一个硬盘,一切好说,如果里面挂载了两个,甚至三个硬盘 ...

  4. 12.HTML编辑器（CKEditor、CKFinder集成）

    CKEditor原名为FckEditor,是著名的HTML编辑器,可以在线编辑HTML内容. 配置参考文档:主要将ckeditor中的lang.plugins.skins.ckeditor.js.co ...

  5. 线性链表的双向链表——java实现

    .线性表链式存储结构:将采用一组地址的任意的存储单元存放线性表中的数据元素. 链表又可分为: 单链表:每个节点只保留一个引用,该引用指向当前节点的下一个节点,没有引用指向头结点,尾节点的next引用为 ...

  6. Data 语义学(1)

    一.Data Member 的绑定(The binding of Data Member) extern float x; class Point3d { public: Point3d( float ...

  7. 【JS模式】单体模式

    <JavaScript模式> /** * 单体(Singleton)模式的思想在于保证一个特定类仅有一个实例.这意味着当您第二次使用同一个类创建新对象的时候,每次得到与第一次创建对象完全相 ...

  8. CodeForces 591A

    题目链接: http://codeforces.com/problemset/problem/591/A 题意: a,b两个相距L距离,两个分别以p,q速度从左右两个端点出发,每次相遇后,又以原来的速 ...

  9. poj1743 Musical Theme（后缀数组|后缀自动机）

      [题目链接] http://poj.org/problem?id=1743     [题意]     求不可重叠最长重复子串.   2015-11-27 [思路] 1)      据题意处理字符串 ...

  10. hdu 4681 最长公共子序列+枚举

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4681 #include<cstdio> #include<cstring> # ...