注意：

　　由于各个浏览器兼容问题大家还是少用这个，下面是具体的使用方法和效果截图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

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

    <title></title>

    <style type="text/css">

        *{padding:0px; margin:0px; font-size:50px;}

        @font-face { font-family: test; src: url('alpha_echo.ttf'); }

        @font-face { font-family: test1; src: url('Almendra-Bold.otf'); }

        @font-face { font-family: test2; src: url('MFYueHei_Noncommercial-Regular.otf'); }

        @font-face { font-family: test3; src: url('Ruthie-Regular-OTF.otf'); }

        p{font-family: "test";}

        b{font-family: "test1";}

        span{font-family: "test2";}

        strong{font-family: "test3";}

    </style>

</head>

<body>

    <p style="font-size:40px">asdfasdfasdf白增飞</p>

    <b>adfasdfasdf</b><br />

    <span>白增飞 demo Font test</span>

    <br />

    <strong>baizengfei 白增飞</strong>

</body>

</html>

效果如下：

DIV+CSS外部字体引用的更多相关文章

  1. CSS在线字体库，外部字体的引用方法

    目录: 1:CSS家族五大字体 2:360和谷歌外部字体引用方法 3:谷歌外部字体引用方法详解 4:@font-face用法详解 一: {font-family:serif,sans-serif,fa ...

  2. CSS在线字体库，外部字体的引用方法@font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  3. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  4. 常见div+css网页布局（float,absolute）

    网页布局-常见 1,           float布局 (1)常规方法 <div id="warp">     <div id="column&quo ...

  5. css之字体的引用

    font-family 属性设置文本的字体系列. font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体. 注意: 如 ...

  6. CSS引入外部字体方法，附可用demo

    有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需要我们在css中进行定义并且引入字体文件路径然 ...

  7. Java引用外部字体（路径引用）的一些坑

    一 原因 后端负责字体...哎,我们公司的前端真的任性啊... 然后,一路踩了jvm关于字体的坑,重点是,java的报错很随意,甚至不报错,建议直接看最后面. 二 代码 正常要windows装一次字体 ...

  8. DIV+CSS+JS实现色彩渐变字体

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 在WPF（core版本）中引用外部字体不可用问题说明

    这几天使用WPF写软件,想引用外部字体,于是下载了字体文件: 然后在App.xaml中添加了如下代码: <FontFamily x:Key="Digital-7 Mono"& ...

随机推荐

  1. Best Premium Private Proxy Service | Lime Proxies

    Best Premium Private Proxy Service | Lime Proxies undefined

  2. Border - SGU 133(排序)

    题目大意:有N对区间现在剔除一些区间,这些区间被另一些区间完全包含,如,Ai<Bi, Bj<Aj, A完全包含B,求出来这样被包含的区间个数. 分析:首先按照第一个数字先进行一下排序,然后 ...

  3. 002-python书写规范--消去提示波浪线

    强迫症患者面对PyCharm的波浪线是很难受的,针对如下代码去除PyCharm中的波浪线: # _*_coding:utf-8_*_ # /usr/bin/env python3 A_user = & ...

  4. 编译LOADCEPC.EXE程序

    1.安装编译工具 安装MSVC152路径C:/MSVC; 安装MASM611可以自己指定E:/MASM611; 命令行编译 相关文件配置 修改setupen2.bat 如下: :PATH_DONE s ...

  5. poj2406--Power Strings（KMP求最小循环节）

    Power Strings Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 33178   Accepted: 13792 D ...

  6. android 14 进度条和拖动条

    进度条: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:l ...

  7. iOS-iPad开发之popoverController使用介绍

    iOS-iPad开发之popoverController使用介绍 iOS开发UI篇-popoverController使用注意 iOS SDK:自定义Popover(弹出窗口) 实现的简单例子: // ...

  8. 如何自定义echarts主题

    上一篇,选择echarts原有的主题样式,那么如何自定义自己的主题 与选择原有主题类似 1.echarts官网地址http://echarts.baidu.com/echarts2/doc  在工具中 ...

  9. rabbitmq pika connection closed

    You are here: Home / rabbitmq pika connection closed rabbitmq pika connection closed By lijiejie on  ...

  10. 单元测试--------Assert

      名称 说明 AreEqual(Object, Object) 验证指定的两个对象是否相等. 如果两个对象不相等,则断言失败. AreEqual(Double, Double, Double) 验证 ...