作者:zccst

最近见到一种图标写在content里的用法,觉得很新奇。查了一下是webfont。

问题:以下是我看到的一段css的源代码,其实就是在分享到为微博的时候的图标

a#end_cc, a#twitter, a#weibo {
margin: 0 5px;
border-bottom: none;

}


a#end_cc:before, a#twitter:before, a#weibo:before {
font-size: 24px;
font-family: "fontello";

}

#end_cc:before {
content: "\e7a5";

}

#twitter:before {
content: "\f309";

}

#weibo:before {
content: "\f33f";

}

其中不太明白的是\f309
这些是如何定义的,我在网上找也没有找到。
在 利用css的content:'f003'生成的内容,这里用到的是什么技术? 里有人提到,就是我想问的。但是我也找了回答给出的链接,还是不特明白。
现在我想在这个基础上自己做一个分享到豆瓣的小图标。不知道应该怎么搞?


现在的效果就会是这个样子的。我要继续仿照应该怎么搞?

解答:

这个是webfont

在css里面,如果想使用某个字体,但是又担心用户电脑上没有,就可以使用font-face属性从服务器上引用这组字体。具体怎么用,搜一下font-face就很清楚了,不多说。

其中不太明白的是\f309
这一段css表示:
在节点#twitter前面,插入一段内容("\f309")。
这个内容("\f309")是一个字符,f309是这个字符的16进制unicode编码。
不理解可以把 "\f309" 改成 "\6211" ,然后查看效果。事实上 content:"和 content:"\6211" 的含义是一样的。

需要知道,计算机里面每个字符都有一个unicode编码,比如「我」的unicode是6211(16进制),而字体文件的作用是规定某个字符应该用什么形状来显示。
unicode字符集里面,E000 至 F8FF属于用户造字区。原本是空的,用户可以在字体文件里面随便定义这些字符的形状。我们所见的webfont icon,一般就选在这一部分。
(上面这段讲得可能不专业,大致知道是这么一回事就行。)

要使用自定义字符,大致步骤是:

  1. 自己造一个字体文件,把e000所对应的字符形状画上新浪的icon,保存为常用字体文件格式。
  2. 在css中使用font-face引用这个字体文件,任意命名(不和已有的重复,比如叫myfonticon)
  3. 需要显示图标的地方定义font-family为myfonticon,content属性设为"\e000"。

造字可以用Fontographer 5,参考这篇文章webfont应用系列(二)如何制作图标字体?

其实网上已经有一大堆免费好用webfont icon,比如:
IcoMoon App
Ionicons: The premium icon font for Ionic Framework
Fontello - icon fonts generator

下面是在网上找到的关于content的用法。

1,最基本的 – 生成内容

content使用如下:

h2:before {
content: "我是额外文字!";
}

此段样式的作用是在每个h2标签的前面添加文字“我是额外文字”。

2,使用计数器常见号码内容。

ul和li有sectioncounter属性

3,为多语言内容插入正确的引号

不同的语言使用不同的引号字符。比如英文的引号就是"",而中文引号就是“”。使用content可以使得不同的语言使用对应的一些字符。例如,我们需要对下面的些文字添加其对应语言的引号,该怎么办呢?

<p lang="en"><q>It’s only work if somebody makes you do it.</q></p>
<p lang="no"><q>Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.</q></p>
<p lang="ch"><q>欢迎来到上海,欢迎参观世博会!</q></p>

我们不妨试试下面的代码:

/* 为不同语言指定引号的表现 */
:lang(en) > q {quotes:'"' '"';}
:lang(no) > q {quotes:"«" "»";}
:lang(ch) > q {quotes:"“" "”";} /* 在q标签的前后插入引号 */
q:before {content:open-quote;}
q:after {content:close-quote;}

4,用图片替换文字

关于图片替换技术,您可以参见这里:several image replacement techniques,里面提供了几种方法。而这里展示的则是另外不同的用图片替换方法,使用的是content。

您可以参见下面的代码:

div.logo {
content:url(logo.png);
}

这种图片替换技术的优点在于文字内容确实被替换了。因此,您没有必要设定高宽为图片的显示创造空间,或是使用text-indent或是padding隐藏最初的文字。

然而,就目前而言,还是有不少需要注意的:
1)你不能对图片进行重复或平铺,或是使用image sprite。
2)目前仅在Opera 9.5+ 和 Safari 4+浏览器下起作用,因为这些浏览器支持所有元素的content方法,而不仅仅局限于:after或是:before。
替换的图片无法应用alt属性,所以一些特殊的使用屏幕阅读器的用户可能无法理解您替换的图片的含义。

5,显示相对应的链接图标

指的是针对不同的链接类型,在链接的后面显示对应链接类型的图标,例如,链接的对象是一个图片,则显示图片的小图标,如果链接对象是视频,则显示视频小图标,如果链接就是个URL网页链接,则显示链接的小图标。您可以参见下面的代码:

CSS代码:

p a[href $=".pdf"]:after {
content:url(../image/icon_pdf.png);
}
p a[rel = "external"]:after {
content:url(../image/icon_link.png);
}
HTML代码:

<p>您可以查看此PDF文件:<a href="/sample.pdf">web站点的性能优化.pdf</a>,或是在线查看,<a href="http://www.zhangxinxu.com/wordpress/" rel="external">点击这里</a>。</p>

结果如下图所示:

:after和:before中的content(放入icon)的更多相关文章

  1. Qt中的QTableView 中的列放入Widget

    QTableView是Qt中Model View理念的框架,View只展现数据,所以通过互交修改编辑数据,需要用到委托这个概念Delegate. 所以基本思路是继承QItemDelegate这个类,然 ...

  2. 将Oracle中的数据放入elasticsearch

    package com.c4c.test; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Res ...

  3. 【Android】我有放入Icon到mipmap,但不显示,只显示安卓机器人Icon(Android 8.0 图标适配)

    首先,放上别人写的博客,而我自己的博客,只会写大概思路,给自己留给备忘 https://blog.csdn.net/guolin_blog/article/details/79417483 其实会发生 ...

  4. JAVA ArrayList实现随机生成数字,并把偶数放入一个列表中

    package Code429; import java.util.ArrayList;import java.util.Random; public class CodeArrayListPrint ...

  5. WPF Prism MVVM 中 弹出新窗体. 放入用户控件

    原文:WPF Prism MVVM 中 弹出新窗体. 放入用户控件 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_37214567/artic ...

  6. JS对象 指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

    指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回 ...

  7. tuple放入dict中

    tuple放入dict中是否可以正常运行 # 将tuple放入dict中 a = ('AI','Kobe','Yao') b = ('AI',['Kobe','Yao']) dict1 = {'a': ...

  8. java通过文件路径读取该路径下的所有文件并将其放入list中

    java通过文件路径读取该路径下的所有文件并将其放入list中   java中可以通过递归的方式获取指定路径下的所有文件并将其放入List集合中.假设指定路径为path,目标集合为fileList,遍 ...

  9. 在查询时将查询条件放入Session中,导出时直接根据qpniRGaFiler取查询条件即可

    在查询时将查询条件放入Session中,导出时直接根据qpniRGaFiler取查询条件即可

随机推荐

  1. C语言根据函数名调用对应的函数

    通过函数指针定义,调用时加上参数 struct Command { const char *name; const char *desc; // return -1 to force monitor ...

  2. POJ1182--食物链(经典并查集)并查集看不出来系列2

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 65906   Accepted: 19437 Description ...

  3. 微信小程序Server端环境配置

    主要内容:1. SSL免费证书申请步骤2. Nginx HTTPS 配置3. TLS 1.2 升级过程 微信小程序要求使用 https 发送请求,那么Web服务器就要配置成支持 https,需要先申请 ...

  4. EM阅读资料

    1,从最大似然到EM算法浅解 2,(EM算法)The EM Algorithm 3,数据挖掘十大算法----EM算法(最大期望算法) (番外)最大后验估计(MAP)

  5. ubuntu下如何安装及使用 pysvn-workbench

    网上对于 pysvn-workbench 的教程几乎没有,没办法,只好去官网自学了,现在能正常上传资料了,写点东西,以免今后忘了 安装方面:在新立得中查找svn-workbench,subversio ...

  6. 选择LDO的方法(转)

    http://www.micro-bridge.com/news/sort.asp?dy1=技术资料&dy2=产品相关资料&page=2 作者:LANDA PHAM   来源:德州仪器 ...

  7. gen_create_syn.sql

    set echo off feedback off verify off pagesize 0 linesize 120 ---变量从 sqlplus 的 call代码 传递过来 . -- 1 表示连 ...

  8. Vacations

    Vacations Vasya has n days of vacations! So he decided to improve his IT skills and do sport. Vasya ...

  9. 使用jquery模拟键盘事件,但window系统并不会真的响应事件,只是浏览器当前页面会响应而已

    <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv= ...

  10. UINavigationBar

    iOS项目,根据设计图,有时需要自定义UIView的UINavigationBar的背景.可以切出来一张1像素左右的背景图片,来充当UINavigationBar的背景. 可以利用Navigation ...