整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS中字体图标入门

CSS中字体图标入门

.什么是字体图标

可以看作一种特殊字体,其展示的是图标,而不再是文字,其拥有字体的特性,比如大小、颜色、透明效果、阴影等,字体图标加载快、不变形。也可以看作是矢量格式的图标。

2.字体图标常用免费资源

(1)iconmoon字体图标库:https://icomoon.io/app

(2)阿里iconfont字体图标库:https://www.iconfont.cn/

(3)font-awesome字体图标库:

3.字体图标使用步骤

以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-family 属性
  • font-size 属性
  • font-weight 属性
  • font-style 属性

字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示:

属 性

可 取 值

描 述

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 中链接标签可用的伪类:

  • a:link
  • a:hover
  • a:active
  • a:visited

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-image 属性
  • list-style-position 属性
  • list-style-type 属性

属 性

可 取 值

描 述

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

首先,我们先来看看问题的源头。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中国 荣誉推出

点击“了解更多”可访问文内链接