Blogger Information
Blog 14
fans 0
comment 0
visits 7755
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html 字体图标和媒体查询
深巷的博客
Original
529 people have browsed it

html 字体图标和媒体查询

1.字体图标的使用

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

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

Unicode 引用

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

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

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

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

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

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

Font-class 引用

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

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

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

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

Symbol 引用

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

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

第二步:加入通用 css 代码(引入一次就行)

  1. <style type="text/css">
  2. .icon {
  3. width: 1em;
  4. height: 1em;
  5. vertical-align: -0.15em;
  6. fill: currentColor;
  7. overflow: hidden;
  8. }
  9. </style>

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

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

2.媒体查询

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

  • 表达式

@media 媒体类型 and (媒体特性){你的样式}

  • 常用属性

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

  • 推荐查询顺序

移动端:从小往大
PC 端:相反,从大往小

  • 示例
  1. /* 宽度范围300及以内,宽度最大300时的样式 */
  2. @media (max-width: 300px) {
  3. html {
  4. font-size: 14px;
  5. }
  6. }
  1. /* 宽度范围301-500,多个媒体特性用and结合 */
  2. @media (min-width: 301px) and (max-width: 500px) {
  3. html {
  4. font-size: 16px;
  5. }
  6. }
  1. /* 宽度范围501及以上 */
  2. @media (min-width: 501px) {
  3. html {
  4. font-size: 18px;
  5. }
  6. }
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:完成的不错,继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post