html 字体图标和媒体查询

html 字体图标和媒体查询

1.字体图标的使用

方式	说明
unicode	unicode 是字体在网页端最原始的应用方式，兼容性最好，支持 ie6+，及所有现代浏览器。
font-class	font-class 是 unicode 使用方式的一种变种，主要是解决 unicode 书写不直观，语意不明确的问题。兼容性良好，支持 ie8+，及所有现代浏览器。
symbol	一种全新的使用方式，支持多色图标，不再受单色限制。兼容性较差，支持 ie9+,及现代浏览器。

以阿里矢量图标库: https://www.iconfont.cn 为例。

Unicode 引用

第一步：拷贝项目下面生成的 font-face 加入 css 中

/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  /* 字体名称 */
  font-family: "iconfont"; /* Project id 2453158 */
  /* 字体文件路径(远程/本地) */
  src: url("//at.alicdn.com/t/c/font_2453158_2hxgp1xcpsq.woff2?t=1666764278475")
      format("woff2"), url("//at.alicdn.com/t/c/font_2453158_2hxgp1xcpsq.woff?t=1666764278475")
      format("woff"),
    url("//at.alicdn.com/t/c/font_2453158_2hxgp1xcpsq.ttf?t=1666764278475")
      format("truetype");
}

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

.iconfont.news {
  /* 1. 必须先声明自定义的字体名称 */
  font-family: iconfont;
  /* 2. 可选 , 声明其它字体属性 */
  /* font-size: x-large;
  color: green;
  text-shadow: 1px 1px 1px #888; */
}

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

<span class="iconfont news">&#xe63d;</span>

Font-class 引用

第一步：拷贝项目下面生成的 fontclass 代码并加入到页面中

<link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css" />

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

<span class="iconfont icon-zixun"></span>

Symbol 引用

第一步：拷贝项目下面生成的 symbol 代码并加入到页面中

<script src="//at.alicdn.com/t/c/font_2453158_2hxgp1xcpsq.js"></script>

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

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

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

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

2.媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定 CSS 样式，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

• 表达式

@media 媒体类型 and （媒体特性）{你的样式}

• 常用属性

max-width：最大宽度
min-width：最小宽度

• 推荐查询顺序

移动端：从小往大
PC 端：相反，从大往小

• 示例

/* 宽度范围300及以内，宽度最大300时的样式 */
@media (max-width: 300px) {
  html {
    font-size: 14px;
  }
}

/* 宽度范围301-500，多个媒体特性用and结合 */
@media (min-width: 301px) and (max-width: 500px) {
  html {
    font-size: 16px;
  }
}

/* 宽度范围501及以上 */
@media (min-width: 501px) {
  html {
    font-size: 18px;
  }
}