zoukankan      html  css  js  c++  java
  • css3的自定义字体

    以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体。

    使用CSS3,网页设计师可以使用他/她喜欢的任何字体。

    当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。

    -----以上内容摘抄自RUNOOB.COM

    我由此想到了以前接触过一种技术,即由美工用一些矢量绘图工具,绘制一些ICON,然后通过一个网站(https://icomoon.io/app/#/select),帮助我们生成一堆文件,生成完成后,这个ICON已经变成了一种字体,也就是说,我们可以改变它的字体大小,字体颜色,hover事件等等。

    值得一提的是,上面提到的网站,本身已经提供了许多现成的ICON,供一些没有美工帮助的前端人员去寻找自己需要的字体图标。

    今天在看CSS3字体的时候,想到这个知识点,原因是当初了解的不是很深,只是知道它的一个流程,原理并不清楚。

    CSS3中,支持任何字体,以前的前端人员,在写页面的时候,字体基本上就是用微软雅黑,宋体,仿宋等常见的字体,最重要的原因就是担心如果用了一些不常见的字体,然后用户电脑没有安装这种字体就会出现异常情况。

    但CSS3弥补了这个缺陷。

    我们可以通过以下方式,使用任何我们想用的字体,都不会出现异常:

    @font-face{

      font-family:'字体名称(可自己定义)';

      src:url(字体文件路径)

    }

    以上代码就帮助我们增加了一种新的字体,这个时候即使用户电脑中没有这种字体,我们也可以放心的使用

    div{

      font-family:'上面font-face中定义的font-family的名字';

    }

    那么现在问题来了,为什么会把这两件事联系起来?我还记得当时问那个教我这个知识点的那个同事一个问题,引入了这个文件,所有的字体都会变成ICON形式的吗,相当于发明了一种新的字体吗(现在想起来真是愚蠢)。

    当然不是。

    这两者的区别是,我上面写的这个例子,是引入了一个完整的字体文件,它里面是包含了对所有已知汉字的对该字体的风格化处理的,所以引入了这个字体文件,就可以保证网页中用到的所有文字都是这个字体的风格,但前面说到的图标字体,其实硬要说的话,也可以理解成一个字体文字(或者说本质上就是),但它里面只有一个文字,就是我们用到的那个ICON,我们只是通过某种技术,把它变成文字的格式了。

    ------------------------------- 把努力当成习惯 -------------------------------
  • 相关阅读:
    Unix网络编程中的五种IO模型
    go工具库分析——go-snowflake
    defer
    滑动窗口
    快速幂
    Golang使用注意点
    微服务数据一致性基础认知
    KMP算法
    单调栈和单调队列
    LRU简单学习
  • 原文地址:https://www.cnblogs.com/qinchuan/p/5564285.html
Copyright © 2011-2022 走看看