可以看作一种特殊字体,其展示的是图标,而不再是文字,其拥有字体的特性,比如大小、颜色、透明效果、阴影等,字体图标加载快、不变形。也可以看作是矢量格式的图标。
(1)iconmoon字体图标库:https://icomoon.io/app
(2)阿里iconfont字体图标库:https://www.iconfont.cn/
(3)font-awesome字体图标库:
以iconmoon为例
(1)选择需要的图标并下载
1)在fonts文件夹下有四种类型的字体文件,每种字体文件兼容浏览器的种类不同
a).tff格式(TrueTypeFont),美国苹果公司和微软公司共同开发的,在Windows和Mac操作系统中为默认字体;IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等浏览器支持该字体。
b).woff格式(Web Open Font Format-Web开放字体格式),是一种网页所采用的字体格式标准,使用zlib压缩,文件大小一般比TTF小40%;IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等浏览器支持该字体。
c).eot格式(Embedded Open Type-嵌入式OpenType ),微软设计用来在网页使用的字体格式,是OpenType字体的压缩格式,IE专用,IE4+支持该字体。
d).svg格式(Scalable Vector Graphics-可缩放的矢量图形),它是一种用XML定义的语言,用来描述二维矢量及矢量/栅格图形;Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等浏览器支持该字体。
其他字体
e).otf格式(Open Type Font),Microsoft和Adobe公司开发的,.otf格式比.ttf更为强大,可以把PostScript字体嵌入到TrueType中。
2)字体转换
https://www.fontke.com/tool/convfont/
(2)字体图标的引入
1)把字体放到项目的相应位置
将下载解压后的fonts文件夹放到项目路径下
2)在html页面中引入字体
利用CSS的@font-face属性,引入外部字体;
在style.css文件中有如下代码,为固定用法,注意url中字体路径,其它可以不变。
在html的style标签中引入如下代码:
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8l3wc0');
src: url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
url('fonts/icomoon.woff?8l3wc0') format('woff'),
url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
3)为元素用该字体
span {
font-family: "icomoon";
}
4)为元素添加内容
复制demo.html中需要的图标,如下,将其作为元素的内容。
<span>?</span>
(3)新增字体图标的引入
当利用iconmoon选用字体图标时,如果有新增的字体图标需要加入,则需要用到.json文件,如下,在原先选择的基础上,再选择新选择的字体图标,然后再下载使用。
1)字体的属性
字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示:
属 性 | 可 取 值 | 描 述 |
font | font-style、font-variant、font-weight、font-size(或 line-height)、font-family | 在一个声明中设置所有的字体属性 |
font-family | 字体名称、inherit | 设置字体类型 |
font-size | xx-small、x-small、small、medium(默认)、large、x-large、xx-large smaller、larger length、%、inherit | 设置字体大小 |
font-weight | normal(默认)、bold、bolder、lighter、inherit 100、200…900(400=normal,700=bold) | 设置字体粗细 |
font-style | normal、italic、oblique、inherit | 设置字体风格 |
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h3 {
font-size: 20px;
font-family: 隶书;
line-height: 28px;
}
span {
font: italic 16px 华文彩云;
}
</style>
</head>
<body>
<h3>Web 前端技术</h3>
<span
>在当今社会中,Web 已经成为网络信息共享和发布的主要形式。要想开发 Web 应用
系统,就必须掌握 Web 前端技术。</span
>
</body>
</html>
显示为,
(2)CSS 中链接标签可用的伪类:
CSS 中,伪类是添加到选择器的关键字,给指定元素设置一些特殊状态,我们以 : 开头。
链接有以下四个状态。这四种状态也称之为超链接的伪类。
状态 | 效果 |
a:link | 普通的、未被访问的链接。 |
a:hover | 鼠标指针位于链接的上方。 |
a:active | 链接被单击的时刻。 |
a:visited | 用户已访问的链接。 |
针对超链接的上述四种状态设置样式规则,能起到美化超链接的作用。例如,为了完成下对超链接的显示要求,编写的 CSS 样式代码如下。
状 态 | 颜 色 | 背 景 色 | 文 本 修 饰 |
未访问 | 蓝色 | 无 | 无下画线 |
鼠标移到 | 黑色 | #DDDDDD | 下画线 |
正单击 | 红色 | #AAAAAA | 删除线 |
已访问 | 绿色 | 无 | 无下画线 |
对于超链接的伪类,我们推荐的使用顺序是::link - :visited - :hover - :active。
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="#">这是一个链接</a>
</body>
</html>
显示为,
为什么要按照这样的顺序来使用呢? 调整几个伪类的顺序,看看会发生什么。
我们把 a:link 放到最后,效果如下:
从图中可以发现其中的样式属性都被覆盖了。
(3)列表相关的样式属性:
属 性 | 可 取 值 | 描 述 |
list-style | list-style-type、list-style-position、list-style-image | 在一个声明中设置所有的列表属性 |
list-style-image | URL、none | 设置图像为列表项标志 |
list-style-position | inside、outside、inherit | 设置列表中列表项标志的位置 |
list-style-type | disc(默认)、circle、square、decimal 等 | 设置列表项标志的类型 |
例子,
wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif
译自: https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/
作者: Sirko Kemter
译者: David Dai
欢迎回到我们为了构建更快网页所写的系列文章。本系列的 第一部分 和 第二部分 讲述了如何通过优化和替换图片来减少浏览器脂肪。本部分会着眼于在 CSS( 层叠式样式表 )和字体中减掉更多的脂肪。
首先,我们先来看看问题的源头。CSS 的出现曾是技术的一大进步。你可以用一个集中式的样式表来装饰多个网页。如今很多 Web 开发者都会使用 Bootstrap 这样的框架。
这些框架当然方便,可是很多人都会将整个框架直接复制粘贴走。Bootstrap 非常大:目前 Bootstrap 4.0 的“最小”版本也有 144.9 KB. 在这个以 TB 来计数据的时代,它可能不算多。但就像所说的那样,一头小牛也能搞出大麻烦。
我们回头来看 getfedora.org 的例子。我们在 第一部分 中提过,第一个分析结果显示 CSS 文件占用的空间几乎比 HTML 本身还要大十倍。这里显示了所有用到的样式表:
那是九个不同的样式表。其中的很多样式在这个页面中并没有用上。
Font-awesome CSS 代表了包含未使用样式的极端。这个页面中只用到了这个字体的三个字形。如果以 KB 为单位,getfedora.org 用到的 font-awesome CSS 最初有 25.2 KB. 在清理掉所有未使用的样式后,它只有 1.3 KB 了。这只有原来体积的 4% 左右!对于 Bootstrap CSS,原来它有 118.3 KB,清理掉无用的样式后只有 13.2 KB,这就是差异。
下一个问题是,我们必须要这样一个 bootstrap.css 和 font-awesome.css 吗?或者,它们能不能合起来呢?没错,它们可以。这样虽然不会节省更多的文件空间,但浏览器成功渲染页面所需要发起的请求更少了。
最后,在合并 CSS 文件后,尝试去除无用样式并缩小它们。这样,它们只有 4.3 KB 大小,而你省掉了 10.1 KB.
不幸的是,在 Fedora 软件仓库中,还没有打包好的缩小工具。不过,有几百种在线服务可以帮到你。或者,你也可以使用 CSS-HTML-JS Minify ,它用 Python 编写,所以容易安装。现在没有一个可用的工具来净化 CSS,不过我们有 UnCSS 这样的 Web 服务。
CSS3 带来了很多开发人员喜欢的东西。它可以定义一些渲染页面所用的字体,并让浏览器在后台下载。此后,很多 Web 设计师都很开心,尤其是在他们发现了 Web 设计中图标字体的用法之后。像 Font Awesome 这样的字体集现在非常流行,也被广泛使用。这是这个字体集的大小:
current free version 912 glyphs/icons, smallest set ttf 30.9KB, woff 14.7KB, woff2 12.2KB, svg 107.2KB, eot 31.2
所以问题是,你需要所有的字形吗?很可能不需要。你可以通过 FontForge 来去除这些无用字形,但这需要很大的工作量。你还可以用 Fontello . 你可以使用公共实例,也可以配置你自己的版本,因为它是自由软件,可以在 Github 上找到。
这种自定义字体集的缺点在于,你必须自己来托管字体文件。你也没法使用其它在线服务来提供更新。但与更快的性能相比,这可能算不上一个缺点。
现在,你已经做完了所有对内容本身的操作,来最大限度地减少浏览器加载和解释的内容。从现在开始,只有服务器的管理技巧才才能帮到你了。
有一个很简单,但很多人都做错了的事情,就是使用一些智能缓存。比如,CSS 或者图片文件可以缓存一周。但无论如何,如果你用了 Cloudflare 这样的代理服务或者自己构建了代理,首先要做的都应该是缩小页面。用户喜欢可以快速加载的页面。他们会(默默地)感谢你,服务器的负载也会更小。
via: https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/
作者: Sirko Kemter 选题: lujun9972 译者: StdioA 校对: wxy
本文由 LCTT 原创编译, Linux中国 荣誉推出
*请认真填写需求信息,我们会在24小时内与您取得联系。