信息
- 中文名
- font
- 含 义
- 字体
font简介
CSS1/CSS2 兼容性：IE4+ NS4+ 继承性：有font: [ [<'font-style'>||<'font-variant'>||<'font-weight'>]?<'font-size'>[ /<'line-height'>]?<'font-family'>] | caption | icon | menu | message-box | small-caption | status-bar |inherit该属性是复合属性。第一种声明方式请参阅各参数对应的属性。第二种声明方式中的参数属于CSS2。caption: 使用有标题的系统控件的文本字体（如按钮，菜单等）icon : 使用图标标签的字体menu: 使用菜单的字体message-box : 使用信息对话框的文本字体small-caption : 使用小控件的字体status-bar : 使用窗口状态栏的字体设置或检索对象中的文本特性。该属性是复合属性。对于如何使用用户端系统可能没有的字体，可以参阅@font-face规则。对应的脚本特性为font。请参阅我编写的其他书目。p {font: italic small-caps 600 12pts/18pts宋体; }p { font: italic small-caps 600 12pts/150% Courier; }p { font: italic small-caps 600 12pts/1.5 Courier; }p { font: italic small-caps 600 12pts/18pts Courier; }p {font: /18pts serif; }H1 {font:italic bold 15pt/17pt Arial; }
-
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) 构造函数中指定了不同的字符集...
收藏数
160,292
精华内容
64,116
-
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发展