CSS技巧

CSS技巧

1. css初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同的浏览器对 HTML 文本呈现的差异，兼容浏览器需要对 css 初始化

• 使用 github 上超火的 css 初始化库 Normalize.css 使浏览器呈现所有 HTML 元素更加一致，并且符合现代 web 标准。
• Normalize.css 只作用于需要规范化的样式
  • cdn 引入 <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.css" rel="stylesheet">
  • 文件下载地址 https://necolas.github.io/normalize.css/8.0.1/normalize.css

2. 字体图标

常见字体图标库：iconfont 阿里巴巴矢量图标库、font awesome v4/v5、iconmoon、

使用步骤如下：

第一步：打开 iconfont 阿里巴巴矢量图标库，选择自己想要的图标加入项目然后本地下载文件

第二步：解压下载的 .zip 文件，打开 demo_index.html 文件

第三步：引入文件到自己的项目中，有三种引入方式 Unicode 引入、Font class 引入、Symbol 引入

2-1 Font class 引入 (常用)

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题

与 Unicode 使用方式相比，具有如下特点：

• 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么
• 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-meh-filling"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”

2-2 Unicode 引入

Unicode 是字体在网页端最原始的应用方式，特点是：

• 支持按字体的方式去动态调整图标大小，颜色等等
• 默认情况下不支持多色，直接添加多色图标会自动去色

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

Unicode 使用步骤如下：

第一步：拷贝项目下面生成的 @font-face

@font-face {
   
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1638446867490') format('woff2'),
       url('iconfont.woff?t=1638446867490') format('woff'),
       url('iconfont.ttf?t=1638446867490') format('truetype');
}

第二步：定义使用 iconfont 的样式

.iconfont {
   
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">&#xe68b;</span>

“iconfont” 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”

2-3 Symbol 引入

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
• 兼容性较差，支持 IE9+，及现代浏览器。
• 浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

<style>
.icon {
     
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-meh-filling"></use>
</svg>

3. 字体引用

字体引入是通过 @font-face 属性来指定一个用于显示文本的自定义字体

3-1 属性介绍

/* 语法 */
@font-face {
   
      font-family: <YourDefineFontName>;
      src: <url> [<format>],[<source> [<format>]];
      [font-weight: <weight>];
      [font-style: <style>];
}
/* 带中括号的属性为非必须选项 */

• font-family：为载入的字体取名字

• src：

  • **url：**加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址

  • **format：**定义的字体的格式，用来帮助浏览器识别。主要取值为：truetype(.ttf)、opentype（.otf)、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)

• font-weight：定义加粗样式

• font-style：定义字体样式

/* format对应字体格式 以及 常见兼容性写法 */
@font-face {
   
  font-family: 'MyName';
  src: url('../fonts/xxx.eot');
  src: url('../fonts/xxx.eot?#iefix') format('embedded-opentype'),
       url('../fonts/xxx.woff') format('woff'),
       url('../fonts/xxx.ttf') format('truetype'),
       url('../fonts/xxx.svg#defineName') format('svg');
  font-weight: normal;
  font-style: normal;
}

#iefix有何作用？

IE9 之前的版本没有按照标准解析字体声明，