CSS3导入字体后用另外一种索引去加载字体里面的字符的问题。

最新推荐文章于 2024-09-15 22:31:42 发布
最新推荐文章于 2024-09-15 22:31:42 发布
阅读量87 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/openoschina/blog/380215
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

 170822_HX5A_1037462.png

上面的图为正常引用字体里面对应的字符标示！

在页面展示只需要一个class 就能引用出来。

但是我发现一些国外的网站模板里面引用可另外一种索引方式

介绍如下：

 

第一步引用字体

‍

 170920_OPJF_1037462.png

 

 

第二步：

‍

 170934_hh8h_1037462.png

加载class字体

 

在页面上 引入css

 

 

下面就是页面展示的参数，拿其中一个举例子：

 

170949_kJNb_1037462.png

 

 

展示效果“

 

 


 171000_PkUQ_1037462.png

 

 

他在span标签引用这个icon 但是没有指定 我们正常模式下面的例如 icon-car 这样而是统一了icon   用了一个html的字符编码&#61xxx

 

 

我用typeTool3字体查看器打开字体查看，并没有发现什么61xx开头的对应的东西

 

如下图

 


 

 171012_oxCa_1037462.png

 

 

 

 

 

我的问题 那个对应的索引61xx 是怎么算出来。。。

 

请大牛帮忙解答一些，O(∩_∩)O谢谢





百度大牛邮件回复：


只是引用Unicode码位的进制不同。61700是十六进制的f104转成十进制的结果。

 

CSS中，引用字符写在了icon对应伪元素的content属性中，比如angle-left这个图标对应的CSS是：content: "\f104"; ß f104是这个字符的Unicode编码

 

除了常见的预先命名的  < >等字符，HTML 中也可以使用Unicode形式引入字符，可参考HTML规范：

http://www.w3.org/TR/html/syntax.html#character-references

十进制引用：

十六进制引用：

 

 



转载于:https://my.oschina.net/openoschina/blog/380215

weixin_33923762
关注
直接调用的CSS超级棒的哦，用过才知道，整理好久才整理出来的，下一篇会发使用说明
笑笑
09-16 4505
html{margin:0;padding:0;border:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);} body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blo
H5+css3面试题总结
Ryan的博客
08-22 2万+
H5+css3面试题总结 哈喽，各位小伙伴们，又到了一年一度的毕业季，俗话说的话：毕业等于失业。一毕业就要面临着找工作的压力。我们程序员也是一样，程序员找工作更辛苦。因为还会有技术面试。所以我给大家总结了我面试的一些问题及答案，希望能帮到大家 一、html5和html的区别： 1.html5新增了语义化标签：footer 、nav、section… 2.html5完全支持css3 3.支持本地离线...
font awesome
Mia_shaungchen的博客
10-23 1491
  font Awesome 图标引用方法 1、在head中通过link标签引入font-awesome.css。 2. 在适应某个图标时，通过i标签引入，如下。 <i class="fa fa-camera-retro"></i> 网页使用Font Awesome图标字体时，css定义 content 属性   网页使用Font Awesome图标字体...
CSS图标ICO参考
天际线；世界的尽头；天涯海角 !
06-29 3338
@charset "UTF-8"; //Variables $fa-css-prefix: icon- !default; $fa-family-name: "FontAwesome" !default; $file-path: "../../fonts/fontawesome-webfont
网页使用Font Awesome图标字体时，css定义 content 属性
热门推荐
zsg88的专栏
03-21 5万+
网页使用Font Awesome图标字体时，css定义 content 属性必不可少，如下所示： .icon:before {     content: '\f005';     font-family: FontAwesome; } 代码 \f005 是一个星星的图标对应代码是.fa-star。 不用 content 属性类来输出font awesome图标这个写法，图标代码
直接在 CSS 中引用 FONTAWESOME 图标（附码表）
fuzhenglai的博客
02-15 2万+
因此我们如果不想用 Fontawesome 提供的类，只想在 css 里面引用图标的话，可以这样子，请自行脑补： .icon:before { content: '\f006'; font-family: FontAwesome; } 同时附上图标类对应的字符编码表： NAME CODE NAME CODE .fa
我在乐字节学习前端的第三天-学习笔记：H5+CSS3面试题总结
weixin_52392949的博客
11-16 920
H5+css3面试题总结 一、html5和html的区别： 1.html5新增了语义化标签：footer 、nav、section… 2.html5完全支持css3 3.支持本地离线存储 4.新增了canvas标签 5.新增视频和音频标签 HTML5离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。 如何区分 HTML 和 HTML5？ DOCTYPE声明 新增的结构元素 功能元素 123 二、对语义化标签的...
浏览器、html、css面试题（一）
hrj970808的博客
11-12 3206
1.什么是盒模型 盒模型 margin(外边距)- 清除边框外的区域，外边距是透明的。 border(边框)- 围绕在内边距和内容外的边框。 padding(内边距)- 清除内容周围的区域，内边距是透明的。 content(内容)- 盒子的内容，显示文本和图像。 W3C的标准盒模型 在标准的盒子模型中，width指content部分的宽度 IE的盒模型 在IE盒子模型中，width表示content+padding+border这三个部分的宽度 css如何设置两种模型 这里用到了CSS3 的属性
basefont.createfont设置表单字体_《Flask 入门教程》第 7 章：表单
weixin_39819661的博客
11-20 1780
在 HTML 页面里，我们需要编写表单来获取用户输入。一个典型的表单如下所示：<编写表单的 HTML 代码有下面几点需要注意：在 <form> 标签里使用 method 属性将提交表单数据的 HTTP 请求方法指定为 POST。如果不指定，则会默认使用 GET 方法，这会将表单数据通过 URL 提交，容易导致数据泄露，而且不适用于包含大量数据的情况。<input> 元...
css总结
love_dzq的博客
05-20 2169
对CSS2以及CSS3和移动端布局方式做了个总结
在 CSS 中直接引用 fontawesome 图标（附码表）
材女的进击
03-11 1万+
因此我们如果不想用 Fontawesome 提供的类，只想在 css 里面引用图标的话，可以这样子，请自行脑补： &amp;lt; style=&quot;font-family:SimSun,monospace,sans-serif; margin-top:0px; margin-bottom:24px; outline:0px; padding:1px; vertical-align:baseline; l...
CVTE前端一面——记秋招的第一次面试
眼里长着太阳，笑里全是坦荡
07-27 2989
前言：本次秋招第一次面试，事实上也是第一次正式的面前端，还是有点紧张，回听自己的录音，感觉有些话说的真的是太邋遢了，没用的话太多。不要紧张，发挥出自己的正常水平。 最后面试官说有什么问题要问，感觉一直都不知道这个问题究竟问什么比较好，所以又问了老问题：对我有什么评价或者学习上的建议吗？后来想了一下，可以问，前端在贵公司主要是做什么业务呢？主要偏重于移动端还是PC端？ 面试形式：电话面试 面试...
让程序使用自带的字体文件
a539284554的博客
09-19 273
转载请说明原出处，谢谢~· 我笔记本使用的是win7系统，开发的duilib程序一直都使用微软雅黑字体，昨天在xp系统下测试时发现由于xp下没有微软雅黑字体而导致duilib使用了默认的宋体字，瞬间感觉界面不协调了。解决这个问题的方法就是让程序自带自己使用的字体，并且在运行时加载这个字体。以前从来没关心过这个问题。 比较简单的方法就是在程序运行...
CCS6中文件出现中文乱码问题解决方法
小郭的博客
09-14 1万+
CCS6中文乱码问题解决
@font-face 加载字体引用字体之后不起作用
63516的博客
03-29 6191
如题，最近在学习css的时候遇到如下情况 使用@font-face加载多种字体不起作用 反思：是我搞错了，字体加载可能就是要一条一条的写 文件结构目录 代码如下 <!doctype html> <head> <meta charset="utf-8"> <style type="text/css"> @font-face{ font-family: BOOMBOX;src: url(font/BOOMBOX.TTF); font-fami
字体加载策略全面指南
weixin_33800593的博客
10-19 235
本文讲的是字体加载策略全面指南， 2016 年 7 月 12 日，本文需要 20 分钟的阅读时间。 这份指南并不是教你怎么使用显示图标字体，它有不同的加载优先顺序和使用场景。事实上，此时使用SVG或许才是一个长久之计。 跳转到: 随意使用@font-face font-display 预加载preload 不要使用在线字体 内嵌数据 ...
css文件引用后变成了乱码导致样式不能显示的问题的解决
gayayzy的专栏
07-18 4183
一句话：直接在css文件的最开头写下：@charset "utf-8"; 一切搞定。
Tcl lnit error: Can’t find a usable init.tcl in the following directories 问题解决
最新发布
梦想闹钟
09-15 445
实际研究后发现，其实py2exe已经把打包需要的lib放在dist文件夹下了，但是打包后的程序运行后却没有去lib下找，而是去找系统自带的环境变量里找，所以找不到。这个问题出现在我用py2exe打包了一个包含tkinter的图形化界面，在当前电脑上运行无问题，在移动到新电脑上后提示报错、getcwd用于获取当前工作目录绝对路径，在设置环境的变量的时候它用的是绝对路径-所以也导致了在当前电脑上能用而移动后不能用。解决方法是在你的程序里重新设置下环境变量，而且是用相对路径的形式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值