高级元素 额外补充

未深爱
127 阅读2分钟

[TOC]

边框的形状

认识 Web 字体

Web fonts 的工作原理

  • 首先, 我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):
    • 对于某些收费的字体, 我们需要获取到对应的授权;
    • 对于某些公司定制的字体, 需要设计人员来设计;
    • 对于某些免费的字体, 我们需要获取到对应的字体文件;
  • 其次, 在我们的 CSS 代码当中使用该字体(重要):
    • 具体的过程看后面的操作流程;
  • 最后, 在部署静态资源时, 将 HTML/CSS/JavaScript/Font 一起部署在静态服务器中;

使用过程如下：

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

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

@font-face {
  font-family: "myFont";
  src: url(../HuaGuangBuDouTi/HuaGuangBuDouTi-2.ttf);
}

body {
  font-family: "myFont";
}

字体图标

字体图标的好处：

  • 放大不会失真
  • 可以任意切换颜色
  • 用到很多个图标时，文件相对图片较小
<style>
  @font-face {
    font-family: "iconfont";
    src: url(./font_pmggdanceae/iconfont.ttf);
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>
<span class="iconfont"> &#xe657; </span>

认识精灵图 CSS Sprite

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

优势

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

使用

借助 background-position 截取精灵图部分内容

cusor

cursor 可以设置鼠标指针（光标）在元素上面时的显示样式

cursor 常见的设值有

  • auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
  • default：由操作系统决定，一般就是一个小箭头
  • pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
  • text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
  • none：没有任何指针显示在元素上面
avatar
文章
阅读
粉丝