字体图标的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 Web字体</title>
    <style>
        body {
            text-align: center;
        }

        /*声明字体*/
        @font-face {
            /*第三方字体名称*/
            font-family: ‘testfont01‘;
            /*引入第三方字体的文件*/
            src: url(‘../fonts/LiDeBiao-Xing3/LiDeBiao-Xing3.eot‘) format(‘embedded-opentype‘),
            url(‘../fonts/LiDeBiao-Xing3/LiDeBiao-Xing3.woff‘) format(‘woff‘),
            url(‘../fonts/LiDeBiao-Xing3/LiDeBiao-Xing3.ttf‘) format(‘truetype‘),
            url(‘../fonts/LiDeBiao-Xing3/LiDeBiao-Xing3.svg‘) format(‘svg‘);
            font-weight: normal;
            font-style: normal;
        }

        p.demo {
            font-family: testfont01;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p class="demo">
        英雄不问出处,流氓不看岁数这个字行不行
    </p>
    <p class="demo">非英雄,非流氓</p>
</body>
</html>
时间: 2024-08-01 17:47:53

字体图标的案例的相关文章

css3总结(三)立方体、动画、web字体、字体图标、弹性布局、多列布局、伸缩盒子

目录: 1.立方体2.动画3.设置动画的一些属性4.案例:无缝滚动5.web字体6.弹性布局7.多列布局8.弹性布局9.案例:伸缩盒子的flex属性的应用案例(菜单个数不限)10.伸缩盒子的align-items属性     设置侧轴对齐方式11.案例:伸缩盒子,宽高自适应 1.立方体    *transform-style: preserve-3d;/*子元素保留其3d样式*/ <!DOCTYPE html> <html> <head> <title>立方

Bootstrap入门(七)组件1:字体图标

包括200个来自 Glyphicon Halflings 的字体图标,允许 Bootstrap 免费使用. 部分可用图标截图: 所有图标都需要一个基类和对应每个图标的类.把下面的代码放在任何地方都可以正常使用.注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格. 注意: 1.不要和其他组件混合使用 图标类不能和其它组件直接联合使用.它们不能在同一个元素上与其他类共同存在.应该创建一个嵌套的 <span>标签,并将图标类应用到这个 <span> 标签上. 2

Chrome 对于 glyphicon 字体图标不显示的解决的方法

在将Chome默认字体渲染为微软雅黑后,部分字体图标显示为方框,这里Chome扩展文档提供的解决的方法为: 找到 ?custom.css 文件,路径为: C:\Users\(username)\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets 改动或添加内容为: .glyphicon {font-family: 'Glyphicons Halflings' !important;} /* For Glyphicons *

字体图标使用

最近写了一个使用bootstrap的项目,用到了字体图标,下面简要介绍一下在项目中使用字体图标的一些经验 1.在使用bootstrap时,body默认的字体是西文字体,所以需要手动设置字体 body { font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;} 2.在声明自己的字体图标时,使用css3的@font-face设

字体图标

首先,用代码编写字体图标之前新建文件夹pictonic然后添加以下几个文件(如下图所示) 添加后引用这个文件<link rel="stylesheet" href="pictonic/css/pictonic.css">,添加文件只需引用font和css就可以了 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8&qu

CSS字体图标的制作方法

想制作字体图标, 需要先访问这个网站 , http://fontawesome.io/ 如果打开太慢可以用这个 ,http://www.bootcss.com/p/font-awesome/ 反正是一样的. 下载之后可以看到以下这些文件 , font中是字体, less和scss是css的源文件,src中是一些实例文件 自己动手写个demo, 目录如下 demo.html代码如下 <!doctype html> <html> <head> <meta charse

bootstrap字体图标

bootstrap字体图标 http://v3.bootcss.com/components/ <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-C

Bootstrap 字体图标,下拉列表组件的使用

Bootstrap 字体图标,下拉列表组件的使用 Glyphicons 字体图标 通过代码可以看到图标类的使用方法,图标类不能和其它组件直接联合使用,图标类只能应用在不包含任何文本内容或子元素的元素上.所以一般在Button的text前面搞一个span标签,用来渲染图标. aria-label:有的图标可以没有文本,此时可以在代码中通过aria-label这个属性来表明图标的含义,比如这里的"左对齐". aria-hidden:设置其为true,表示图标只是为了装饰之用,避免读取设备的

练习,字体图标和before,afer伪类的方式开发慕课网右下角工具条

这个效果点击慕课网的这个地址就可以查看. 1. 字体图标的方式 相比较背景图片的方式,使用字体图标,会明显增加html结构的复杂度: <div class="toolbar-container"> <a href="javascript:;" class="tbitem tbitem-weixin"> <div class="tbitem-wrapper"> <span class=&