- 中文名
- font
- 含 义
- 字体
-
Font Awesome的正确简单使用方法
2018-03-12 21:01:26网上看了许多的Font Awesome使用介绍,都是要引用Font-Awesome.css文件,还需要把整个Font Awesome文件都拷贝到项目中,这样不仅容错率极低,一旦不小心把文件路径改了,整个项目的icon部分就挂掉了。而且其中的很多...后记:附一个现在常用的,阿里的矢量图标库iconfont:https://www.iconfont.cn/
正文:
网上看了许多的Font Awesome使用介绍,都是要引用Font-Awesome.css文件,还需要把整个Font Awesome文件都拷贝到项目中,这样不仅容错率极低,一旦不小心把文件路径改了,整个项目的icon部分就挂掉了。而且其中的很多文件其实根本使用不到,白白浪费服务器内存,也不便于后期网站的维护,下面将介绍Font Awesome的正确使用方法。
要使用Font Awesome,我们先要理解Font Awesome图标库的原理,首先,一个字体中是存在特殊符号的,例如网页底部常见的©的编码就是©。而Font Awesome本质上是把图标做成了字体文件,一个图标代表一个特殊符号,因此我们需要这个图标的话只需要引用这个字体文件就好了
首先来做一个demo页面
<!DOCTYPE html> <html> <head> <title>name</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/> </head> <body> </body> </html>
接着找到Font Awesome内的字体文件
把这些字体拷贝到你的网页文件夹中,这里建议建立一个单独的字体文件夹,因为一个项目中很可能用到不止一个字体。
接下来要做的,就是在css中引用字体文件了(注,字体的具体路径根据情况自行修改)
css代码:
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }
然后,就可以在网页中插入你想要的图标了。
找到图标的名称
在fontawesome文件夹里找到font-awesome.css并打开
可以看到,刚才要找的图标的编码为f2b9,其实实际编码为此时就可以在html文件中直接使用这个字符了
HTML代码:
<!DOCTYPE html> <html> <head> <title>name</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <link href="css/common.css" rel="stylesheet" type="text/css" media="all"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/> </head> <body> <body> <div class="icon"></div> <div class="icon"></div> <div class="icon"></div> <div class="icon"></div> <div class="icon"></div> </body> </body> </html>
css代码:
.icon{ font-family: FontAwesome; }
这样,就将图标引入到页面中了
-
RuntimeWarning: Glyph missing from current font. font.set_text(s, 0, flags=flags)
2019-11-28 18:55:11plt.rcParams['font.sans-serif']=['SimHei'] # 显示中文标签D:\miniconda3\envs\tf\lib\site-packages\matplotlib\backends\backend_agg.py:180: RuntimeWarning: Glyph 39321 missing from current font. font.set_text(s, 0, flags=flags) D:\miniconda3\envs\tf\lib\site-packages\matplotlib\backends\backend_agg.py:180: RuntimeWarning: Glyph 28207 missing from current font. font.set_text(s, 0, flags=flags) D:\miniconda3\envs\tf\lib\site-packages\matplotlib\backends\backend_agg.py:180: RuntimeWarning: Glyph 28040 missing from current font. font.set_text(s, 0, flags=flags) D:\miniconda3\envs\tf\lib\site-packages\matplotlib\backends\backend_agg.py:180: RuntimeWarning: Glyph 38450 missing from current font. font.set_text(s, 0, flags=flags) D:\miniconda3\envs\tf\lib\site-packages\matplotlib\backends\backend_agg.py:180: RuntimeWarning: Glyph 34389 missing from current font. font.set_text(s, 0, flags=flags)
警告原因,plt 画图是找不到字体,需要手动设置:plt.rcParams['font.sans-serif']=['SimHei'] #显示中文标签 plt.rcParams['axes.unicode_minus']=False
结果
发现图中原本缺失的中文回来了! -
CSS字体样式属性(font-size、font-family、Unicode、font-weight、font-style、font)
2019-06-06 11:10:26font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下: font-family:字体...CSS字体样式属性
font-size:字号大小
font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下:
font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:
p{ font-family:“微软雅黑”;}
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
常用技巧:
1. 现在网页中普遍使用14px+。 2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。 3. 各种字体之间必须使用英文状态下的逗号隔开。 4. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。 5. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。 6. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
CSS Unicode字体
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。
方案一: 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。
方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。
font-family: “\5FAE\8F6F\96C5\9ED1”,表示设置字体为“微软雅黑”。可以通过escape() 来测试属于什么字体。
字体名称 英文名称 Unicode 编码 宋体 SimSun \5B8B\4F53 新宋体 NSimSun \65B0\5B8B\4F53 黑体 SimHei \9ED1\4F53 微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312 隶书 LiSu \96B6\4E66 幼园 YouYuan \5E7C\5706 华文细黑 STXihei \534E\6587\7EC6\9ED1 细明体 MingLiU \7EC6\660E\4F53 新细明体 PMingLiU \65B0\7EC6\660E\4F53 为了照顾不同电脑的字体安装问题,我们尽量只使用宋体和微软雅黑中文字体
font-weight:字体粗细
字体加粗除了用 b 和 strong 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。
font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。
小技巧:
数字 400 等价于 normal,而 700 等价于 bold。 但是我们更喜欢用数字来表示。
font-style:字体风格
字体倾斜除了用 i 和 em 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。
小技巧:
平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。
font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置,其基本语法格式如下:
选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。 注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
-
font属性简写失效的原因font-weight和font-size
2019-06-12 13:59:43在设置字体样式本来是用各自单个属性设置的,嫌麻烦,不想在每个选择器里都用两行来设置字体的weight 和size,所以换成font的简写,一开始写成下面这样,但是发现不生效, * { font-family: "Microsoft YaHei UI ...在设置字体样式本来是用各自单个属性设置的,嫌麻烦,不想在每个选择器里都用两行来设置字体的weight 和size,所以换成font的简写,一开始写成下面这样,但是发现不生效,
* { font-family: "Microsoft YaHei UI Light", sans-serif; } .selector1 { font-size: 2.5rem; font-weight: 100; }
.selector1 { font: 100 2.5rem; }
查了资料以后了解到,如果要使用font简写属性,font-size和font-family是必须的,其他属性是可选的,所以可以写成:
.selector1 { font: 100 2.5rem none; }
或者
.selector1 { font: 100 2.5rem Microsoft YaHei UI Light ; }
第一种写法会使用浏览器默认的字体,第二种是你自己指定的字体。
-
Font类
2018-05-17 08:47:01要点提示:Font类描述字体名、粗细和大小。 可以砸渲染文字的时候设置字体信息。javafx.scene.text.Font类用于创建字体。 Font实例可以使用它的构造方法或者静态方法来创建。Font可以用它的名字、字体粗细、字体... -
Python脚本04 —— 模板中字体统一改成font1、font2、font3、font4、font5、font6
2015-09-22 12:07:05#模板中字体统一改成font1、font2、font3、font4、font5、font6 # coding=utf8 import os,sys def replace(f): if not os.path.exists(f): # 看一下这个文件是否存在 exit(-1) #,不存在就退出 lines = -
java Font
2016-09-12 14:52:23原文章地址:...类 Font java.lang.Object java.awt.Font 所有已实现的接口: Serializable 直接已知子类: FontUIResource public class Fontextends Objectimplements S -
CSS的font和font-size
2019-01-06 09:45:11今天遇到一个问题,没有搞明白font和font-size的关系,研究了https://www.w3schools.com/css/css_font.asp这个帖子,终于搞明白,不过搞不懂为什么,这个网站为什么也需要翻墙,所以就诞生了中文的... -
python Font 对象
2018-09-01 19:46:46Font 对象的 style 属性影响文本在单元格中的显示方式。要设置字体风格属性,就 向Font()函数传入关键字参数。表 12-2展示了 Font()函数可能的关键字参数。 可以调用 Font()来创建一个 Font 对象,并将这个 ... -
font属性简写
2019-06-04 13:30:48一、 font 的属性比较多,有font-style, font-variant, font-weight, font-size,font- family,我们可以把它们按照顺序统一放在font属性中,在一个声明中设置所有字体属 性。 font-family 设置字体系列。 font-... -
了解CSS属性font-kerning,font-smoothing,font-variant
2017-06-04 16:18:15本文很简单,了解几个可能平时用得不太多,长得不太熟的font相关的几个CSS属性,分别是:font-kerning, font-smoothing和font-variant。字距调整属性font-kerningfont-kerning应该算是一个CSS3属性,主要作用是调整... -
HTML5基础加强css样式篇(font-family,font-size, font-style,font-variant, font-weight , font 简写...
2017-03-07 10:10:59font-family 设置字体系列。 font-size 设置字体的尺寸。 font-style 设置字体风格。 font-variant 以小型大写字体或者正常字体显示文本。 font-weight 设置字体的粗细。 font 简写属性。 1.... -
QML 的 font 与 Canvas 的中 font
2017-02-28 17:58:53QML 的 font 与 Canvas 的中 font QML 中的 Canvas 的 font 类型和 HTML CSS font 的类型一样,但是和 QML 本身的 font 不一样,所以需要做一个转换函数。 QML 中的 font 有如下属性: string font.... -
Font字体
2017-10-27 08:59:54JULLIAN SCRIPT 直接地址:DOWNLOAD Bellico Typeface + Bonus Vectors 直接下载:DOWNLOAD Diamor Script ...Alivia Script Font 直接下载:DOWNLOAD Bahagia Typefac -
css中font-family和font-style的区别
2020-05-14 20:23:57初学字体样式的时候会分不清楚font-family和font-style的区别 font-family :是字体系列 它的值有很多,比如 “宋体”,“微软雅黑”等等,就是你电脑字体库里面有的那些字体。 font-style:是字体样式 它的值有:... -
<学习CSS>第一天笔记-css样式规则、字体样式属性(font-size、font-family、Unicode、font-weight、font-...
2017-11-15 17:19:26CSS样式规则、字体样式属性(font-size、font-family、Unicode、font-weight、font-style、font综合设置字体样式)chrome调试工具 -
font字体样式
2019-07-04 20:30:37Font-size 字体大小 其中px最常用,其次em。 网页上一般采用14px以上字号大小。 尽量设置为偶数大小,IE奇数可能有显示bug。 <p>文字内容</p> p { font-size:16px; color:blue; } font-family:字体 &... -
font标签属性
2019-07-26 15:22:48font标签使用 font标签设置文字颜色color font标签设置文字大小size (1~7) font标签设置文字字体face="(黑体,楷体,宋体)" <html> <head> <title></title> <meta charset="utf-8">... -
css font简写
2018-04-17 16:27:12一、字体属性主要包括下面几个font-family,font-style,font-variant,font-weight,font-size,fontfont-family(字体族): “Arial”、“Times New Roman”、“宋体”、“黑体”等;font-style(字体样式): ... -
FontTools的使用
2019-09-22 19:42:08一、FontTools的安装 pip install fontTools 二、FontTools的基本操作 1、字体读取 from fontTools.ttLib import TTFont # 加载字体文件: font = TTFont('maoyan.woff') # 转为xml文件: font.saveXML('maoyan.... -
font-family与font-face区别
2017-03-21 17:05:59font-family:指定字体; 设置后;电脑上无该字体时,观看网页不能显示该字体效果, 针对中文版操作系统,为保证网页效果,通常只指定:宋体、黑体、微软雅黑等系统上默认自带的字体。 font-face :载入一个字体;... -
【HTML】font标签&font属性的使用方法
2018-09-02 22:17:331、font标签 定义和用法: <font>规定文本的字体、字体尺寸、字体颜色 定义和用法:<font规定文本的字体、字体尺寸、字体颜色 实例: 效果: 可选的属性: 属性... -
font字体属性
2018-03-27 17:44:291、字体属性font-weight:字体粗细 bold(加粗)、bolder、light、lighter font-size:字体大小(20px,em(对比父级元素的大小),rem(基于16px标准像素的倍数,如1rem=1*16px))font-family:字体名称(微软雅黑)font-... -
CSS——字体(font-family,font-style,font-size注意要点)
2017-12-04 12:31:48font-family——设置字体(宋体、黑体之类的)font-style——设置字体风格(也就是正常显示还是斜着显示) normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示 通常情况下,italic 和 oblique... -
【文本】HTML5 Canvas设置字型属性(font-style、font-variant、font-weight、font-size、line-height、font...
2019-09-29 10:52:30我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让...在Canvas中,可以通过绘图环境对象的font属性设置文本所采用的字型。该属性是一个CSS3格式的字型字符串,各个分量如下... -
解决font property font-family does not have generic default
2016-07-05 11:48:30解决font property font-family does not have generic default解决font property font-family does not have generic default 原因 解决 W3C Font family the font-family property Name font-family Generic font ... -
vue中使用引用font-awesome字体图标fontawesome 简单方法
2019-05-06 11:42:16看见网上相关文档都需要安装好多依赖,有点麻烦,其实只需要安装一个font-awesome就行 第一步安装依赖 cnpm install font-awesome --save 或者 npm install font-awesome --save 个人倾向于前者,因为真快啊 ... -
c# font gdicharset
2015-09-20 22:01:33一个字节值,该值指定此 Font 使用的 GDI 字符集。 默认值为 1。 备注 此属性返回 1,除非在 Font(String, Single, FontStyle, GraphicsUnit, Byte) 构造函数中指定了不同的字符集...
-
kotlin协程类继承关系(PlantUML)
-
spark大数据分析与实战
-
PPTP_NNN 服务生产环境实战教程
-
ELF视频教程
-
Java cas 与 synchronized 的区别
-
navicat.zip
-
移动可用性测试(一):概述
-
ojdbc6.zip
-
Windows系统管理
-
【电子技术】【2014.05】【含源码】以ARM CORTEX-M4F为核心的STM32单片机实时操作系统实现
-
echarts折线图个性化填充、线条、拐点样式以及hover样式
-
JDK 8 的optional类
-
LVS + Keepalived 实现 MySQL 负载均衡与高可用
-
uniapp怎么发起请求
-
骁龙870和骁龙865参数对比 骁龙870和骁龙865差距
-
linux远程
-
Vue.js傻瓜手册3(事件)
-
NFS 网络文件系统
-
C++代码规范和Doxygen根据注释自动生成手册
-
应用推动IPFS发展