第一步,在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. &quot;围观&quot;设计模式(2)--里氏替换原则(LSP,Liskov Substitution Principle)

    在面向对象的程序设计中.里氏替换原则(Liskov Substitution principle)是对子类型的特别定义.它由芭芭拉·利斯科夫(Barbara Liskov)在1987年在一次会议上名为 ...

  2. sh 不显示当前的路径

    linux中sh是链接到bash上的,所以sh与bash在功能上是没有区别的 只是sh不显示路径!!! sh-4.1# cd /usr/local/src sh-4.1# pwd /usr/local ...

  3. 算法图绘制工具Graphviz

    graphviz是贝尔实验室设计的一个开源的画图工具,它的强大主要体现在“所思即所得"(WYTIWYG,what you think is what you get),这是和office的“ ...

  4. 一款基于css3鼠标经过圆形旋转特效

    今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

  5. js去掉双引号

    替换: d = d.replace("\"","").replace("\"",""); 全部替换: ...

  6. STM32CubeMX新建工程+基本IO配置过程

    Ⅰ.写在前面 学习本文之前可以查看我前面的文章: STM32CubeMX介绍.下载与安装 STM32CubeMX使用方法及功能介绍 本文接着上一篇文章结合基本IO配置实例,讲述关于STM32CubeM ...

  7. PHP——面向对象

    <body> <?php //类调用用:: //对象调用用-> class Dog1//定义类 { //成员属性(变量) var $name; var $age; var $p ...

  8. 一种基于匹配回朔的 css3 选择器引擎实现

    介绍 CSS 选择器是一种应用于 DOM 节点查找场景的特定微型语法, 本质上和正则表达式一样都是一种模式匹配语言,灵活使用可以方便得获取指定位置的节点集合. 目前 W3C 推荐标准为 Selecto ...

  9. 【BZOJ】1690: [Usaco2007 Dec]奶牛的旅行(分数规划+spfa)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1690 第一题不是水题的题.. 分数规划.. T-T 百度吧..http://blog.csdn.ne ...

  10. <mvc:annotation-driven />注解详解

    <mvc:annotation-driven /> 是一种简写形式,完全可以手动配置替代这种简写形式,简写形式可以让初学都快速应用默认配置方案.<mvc:annotation-dri ...