HTML番外篇(三)

最新推荐文章于 2024-08-20 19:23:57 发布

DustinWangq

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量55

点赞数

分类专栏： # HTML-CSS 文章标签： html 前端

本文链接：https://blog.csdn.net/Welitsi/article/details/132225536

版权

HTML-CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、border图形

1.边框的形状

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

在这里插入图片描述

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

如果我们进一步, 将另外三边的颜色去除呢?
如果我们将这个盒子旋转呢?

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

https://css-tricks.com/the-shapes-of-css/#top-of-site

二、Web网络字体

1.认识Web字体

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

我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。
这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的;
这就是所谓的 Web-safe 字体;
并且这种默认可选的字体并不能进行一些定制化的需求;

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

在这里插入图片描述

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

2.Web fonts的工作原理

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

对于某些收费的字体, 我们需要获取到对应的授权;
对于某些公司定制的字体, 需要设计人员来设计;
对于某些免费的字体, 我们需要获取到对应的字体文件;

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

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

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

用户的角度:

浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体；
在浏览器中使用对应的字体显示内容；

3.使用Web Fonts

通过如下的方式获取到了字体文件：

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

https://www.fonts.net.cn/fonts-zh-1.html
默认下载下来的是ttf文件；

第二步：使用字体；

使用过程如下：

将字体放到对应的目录中
通过@font-face来引入字体, 并且设置格式
使用字体

在这里插入图片描述

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

4.web-fonts的兼容性

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

在开发中某些浏览器可能不支持该字体, 所以为了浏览器的兼容性问题, 我们需要有对应其他格式的字体;

TrueType字体：拓展名是 .ttf

OpenType/TrueType字体：拓展名是 .ttf、.otf， 建立在TrueType字体之上
Embedded OpenType字体：拓展名是 .eot， OpenType字体的压缩版
SVG字体：拓展名是 .svg、 .svgz
WOFF表示Web Open Font Format web开放字体：拓展名是 .woff，建立在TrueType字体之上

在这里插入图片描述

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

https://font.qqe2.com/# 暂时可用

5.web fonts兼容性写法

◼ 如果我们需要具备很强的兼容性, 那么可以如下格式编写:

在这里插入图片描述

这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）":

这是 Paul Irish早期的一篇文章提及@font-face后开始流行起来 (Bulletproof @font-face Syntax)。

src 用于指定字体资源

url 指定资源的路径
format 用于帮助浏览器快速识别字体的格式;

三、Web字体图标

1.认识字体图标

思考：字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢？

当然可以，这个就叫做字体图标。

字体图标的好处：

放大不会失真
可以任意切换颜色
用到很多个图标时，文件相对图片较小

字体图标的使用：

登录阿里icons（https://www.iconfont.cn/）
下载代码，并且拷贝到项目中

将字体文件和默认的css文件导入到项目中

2.字体图标的使用

字体图标的使用步骤:

第一步: 通过link引入iconfont.css文件
第二步: 使用字体图标

使用字体图标常见的有两种方式:

方式一: 通过对应字体图标的Unicode来显示代码;
方式二: 利用已经编写好的class, 直接使用即可;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 方式二：引入css，通过类选择器来添加图标 -->
  <link rel="stylesheet" href="./css/iconfont.css">
  <style>
    /* 方式一，使用unicode码 */
    @font-face {
      font-family: myicon;
      src: url(./fonts02/iconfont.ttf);
    }

    .box {
      margin: 0 auto;
      height: 50px;
      background-color: orange;
      text-align: center;
    }

    span.planA {
      font: 32px/1.5 myicon;
    }

    span.planB {
      font-size: 32px;
    }
  </style>
</head>
<body>
  <div class="box">
    <span class="planA">&#xe8db;</span>
    <span class="planB iconfont icon-douyin"></span>
  </div>
</body>
</html>

在这里插入图片描述

四、CSS精灵图

1.认识精灵图 CSS Sprite

什么是CSS Sprite ?

是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
有人翻译为：CSS雪碧、CSS精灵

使用CSS Sprite的好处

减少网页的http请求数量，加快网页响应速度，减轻服务器压力
减小图片总大小
解决了图片命名的困扰，只需要针对一张集合的图片命名

Sprite 图片制作（雪碧图、精灵图）

方法1：Photoshop, 设计人员提供
方法2：https://www.toptal.com/developers/css/sprite-generator

2.精灵图的使用

精灵图如何使用呢?

精灵图的原理是通过只显示图片的很小一部分来展示的;
通常使用背景:
1. 设置对应元素的宽度和高度
2. 设置精灵图作为背景图片
3. 调整背景图片的位置来展示

如何获取精灵图的位置

http://www.spritecow.com/

<!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>
    .container {
      margin: 0 auto;
      background-color: orange;
      text-align: center;
    }

    .box {
      display: inline-block;
      width: 176px;
      height: 69px;
      background: url(../../images/163music_sprite01.png) no-repeat 0 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>