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. C#中&与&&的区别

    刚刚翻书发现这个问题,在网上找了一下,我的理解吧. 他俩的区别就是“&”和“|”不执行短路计算,而&&和||执行了短路计算. &不执行短路计算 ——————表达式A&a ...

  2. Node.js教程

    Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的服务器端平台.Node.js是由瑞恩·达尔在2009年开发的,它的最新版本是v0.10.36. N ...

  3. 大用处--PowerShell Management Library for Hyper-V.

    http://pshyperv.codeplex.com/releases 用脚本来收集及集成HYPER-V管理. 越来越似KVM,LIBVIRT啦.

  4. ARM Cortex M3系列GPIO口介绍(工作方式探讨)

    一.Cortex M3的GPIO口特性    在介绍GPIO口功能前,有必要先说明一下M3的结构框图,这样能够更好理解总线结构和GPIO所处的位置. Cortex M3结构框图     从图中可以看出 ...

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

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

  6. linux系统开机过程描述

    本文描述linux系统开机过程,属于个人理解范畴,如果文中表述有误请大家批评指正! 计算机开机之后,首先要加载BIOS(基本输入输出系统)信息,BIOS包含了很多重要的信息,包括CPU信息,设备启动顺 ...

  7. 【转】Any way to implement BLE notifications in Android-L preview----不错

    原文网址:http://stackoverflow.com/questions/24865120/any-way-to-implement-ble-notifications-in-android-l ...

  8. （转载）HTML--- input type=hidden

    (转载)http://www.blogjava.net/lansky07/archive/2007/04/05/108740.html HTML--- input type=hidden 关于< ...

  9. 贪心 BZOJ 3671：[Noi2014]随机数生成器

    Description   Input 第 1行包含5个整数,依次为 x_0,a,b,c,d ,描述小H采用的随机数生成算法所需的随机种子.第2行包含三个整数 N,M,Q ,表示小H希望生成一个1到 ...

  10. Java Annotation 必须掌握的特性

    什么是Annotation? Annotation翻译为中文即为注解,意思就是提供除了程序本身逻辑外的额外的数据信息.Annotation对于标注的代码没有直接的影响,它不可以直接与标注的代码产生交互 ...