前端项目开发-15_额外知识补充.pdf

额外知识补充

王红元coderwhy

目录

content1border图形

2Web网络字体

3Web字体图标

4CSS精灵图

5cursor属性

coderwhy边框的形状

◼border主要是用来给盒子增加边框的,但是在开发中我们也可以利用边框的特性来实现一些形状:

◼假如我们将border宽度设置成50会是什么效果呢?

如果我们进一步,将另外三边的颜色去除呢?

如果我们将这个盒子旋转呢?

◼所以利用border或者CSS的特性我们可以做出很多图形:

/the-shapes-of-css/#top-of-site

coderwhy认识Web字体

◼在之前我们有设置过页面使用的字体:font-family

我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。

这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的;

这就是所谓的Web-safe字体;

并且这种默认可选的字体并不能进行一些定制化的需求;

◼比如下面的字体样式,系统的字体肯定是不能实现的

◼那么我们是否依然可以在网页中使用这些字体呢?使用WebFonts即可.

coderwhyWebfonts的工作原理

◼首先,我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):

对于某些收费的字体,我们需要获取到对应的授权;

对于某些公司定制的字体,需要设计人员来设计;

对于某些免费的字体,我们需要获取到对应的字体文件;

◼其次,在我们的CSS代码当中使用该字体(重要):

具体的过程看后面的操作流程;

◼最后,在部署静态资源时,将HTML/CSS/JavaScript/Font一起部署在静态服务器中;

◼用户的角度:

浏览器一个网页时,因为代码中有引入字体文件,字体文件会被一起下载下来;

浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体；

在浏览器中使用对应的字体显示内容；

coderwhy使用WebFonts

◼课堂上为了给大家演示，通过如下的方式获取到了字体文件：

◼第一步：在字体天下网站下载一个字体

/fonts-zh-1.html

默认下载下来的是ttf文件；

◼第二步：使用字体；

◼使用过程如下：

1.将字体放到对应的目录中

2.通过@font-face来引入字体,并且设置格式

3.使用字体

◼注意:@font-face用于加载一个自定义的字体;

coderwhyweb-fonts的兼容性

◼我们刚才使用的字体文件是.ttf,它是TrueType字体.

在开发中某些浏览器可能不支持该字体,所以为了浏

览器的兼容性问题,我们需要有对应其他格式的字体;

◼TrueType字体：拓展名是.ttf

OpenType/TrueType字体：拓展名是.ttf、.otf，

建立在TrueType字体之上

EmbeddedOpenType字体：拓展名是.eot，

OpenType字体的压缩版

SVG字体：拓展名是.svg、.svgz

WOFF表示WebOpenFontFormatweb开放字体：

拓展名是.woff，建立在TrueType字体之上

◼这里我们提供一个网站来生产对应的字体文件:

/#暂时可用

coderwhywebfonts兼容性写法

◼如果我们具备很强