第一步,在CSS中引入字体并给名字取一个合适的名字,如下

1
2
3
4
5
6
7
@font-face {
    /* font-properties */
    font-family: pictos;
    src:url('pictos/pictos-web.woff'), 
    url('pictos/pictos-web.ttf'),
    url('pictos/pictos-web.eot'); /* IE9 */
}

font-family定义字体的名字,接下来的src是加载字体文件的位置,之所有有多个url就是因为浏览器兼容问题。

第二步,使用刚刚定义的字体,如下

1
2
3
div {
    font-family: pictos;
}

css如何引入外部字体?的更多相关文章

  1. HTML引入外部字体

    HTML5如何引入外部字体 背景 现在我需要 "Montserrat-ExtraLight ExtraLight"类型的字体,但是html的font-family中找不到这个类型的 ...

  2. CSS引入外部字体方法,附可用demo

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

  3. css引入外部字体使网站字体更美观

    @font-face{font-family: myFont;src:url("../font/timesi.ttf");src:url("../font/timesbi ...

  4. 006-CSS引入外部字体

    我们制作页面css,设置字体,可能会需要加入一些比较特殊的字体,这时候就需要引入这些字体. 方法如下: @font-face { font-family: KuTang;/*定义字体的名字*/ src ...

  5. jsp、css中引入外部资源相对路径的问题

    在jsp页面中添加base,可用相对路径: <% String path = request.getContextPath(); String basePath = request.getSch ...

  6. JS 计算时间差,(引入外部字体文件)

    JavaScript Date() 对象: new Date() :时间对象,会把当前时间作为其初始值: setFullYear() :用于设置月份,可有三个参数,setFullYear(year,m ...

  7. CSS引入外部字体

    @font-face {    font-family: '综艺体';    font-style: normal;    font-weight: normal;    src: url(../cs ...

  8. 不同浏览器css引入外部字体的方式

    /** * 字体后缀和浏览器有关,如下所示 * .TTF或.OTF,适用于Firefox 3.5.Safari.Opera * .EOT,适用于Internet Explorer 4.0+ * .SV ...

  9. 微信小程序如何引入外部字体库iconfont的图标

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...

随机推荐

  1. CXCommon.h工具类

    #ifndef __XCOMMON_H__ #define __XCOMMON_H__ /******************************************************* ...

  2. FreeRtos——单任务

    原创(当然借鉴了官网资料^_^): 在之前的移植工作准备好之后,我们需要调用freertos提供给我们的API函数实现操作系统地运行.首先,第一个函数: 任务函数任务是由 C 语言函数实现的.唯一特别 ...

  3. JS学习笔记(1)--sort排序

    sort() 方法用于对数组的元素进行排序. 请注意,数组在原数组上进行排序,不生成副本. 说明 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进 ...

  4. Excel TargetRange.Validation为空的

    做Excel的时候遇到过TargetRange.Validation为空,赋值类似空指针一样的情况. 这样的情况,不懂Excel调试了好久,最后还知道,这个对象需要自己去定义才能够进行赋值, 这样定义 ...

  5. Odoo 8.0 new API 之one装饰

    one装饰器的作用是对每一条记录都执行对应的方法,相当于traditional-style中的function 应用举例: 定义的columns now = fields.Datetime(compu ...

  6. 【安卓】自己定义基于onDraw的随意动画(不不过平移/旋转/缩放/alpha)、!

    思路: 1.基于时间的显示映射.如:给定度数,显示圆弧,加上时序,就可以有圆弧动画的效果 2.给定时序. 用于驱动动画的一帧帧绘制 方案一.基于ObjectAnimator.动画运作时会调用degre ...

  7. mui区域滚动条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Asp.net回调技术Callback学习

    .aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  9. JQuery Show()的几种效果 总有一种是你需要的

    1 show()方法和hide()方法 $("selector").show()  从display:none还原元素默认或已设置的display属性$("selecto ...

  10. [android] AndroidManifest.xml【 manifest -> uses-permission】

    在  API Level 1 时被引入 简介: 在某些情况下,你为app设置的权限将会影响到google应用商店会用何种规则来过滤你的APP. 如果你需要一个硬件相关的权限——CAMERA,googl ...