css鼠标样式 css鼠标选中样式

2023-04-22 18:37  ca 蜻蜓知识  浏览: 2973  作者: tiger  

大有学问 搜索创作挑战赛

什么是字体图标?

在html代码中是以文字元素的形式出现,但在网页渲染时却以图片的形式显示的小图标就叫做字体图标

常见形式:地址、电话、登录窗口的头像等。

字体图标与精灵图对比

字体图标比精灵图更为轻量化,在网页中加载速度更快;

精灵图在实际使用中,图片放大或缩小时图片会失真。

精灵图是一张多个图标整合的一个大图片,后续添加或修改图标不方便。

注:

虽然字体图标好处多多,但是它并不能替代精灵图。

当小图标形式简单且个数较少时适合使用字体图标;

当小图标形式复杂且个数较多时适合使用精灵图。

字体图标哪里来?

icomoon网站:http://icomoon.io/。

阿里iconfont字库:http://www.iconfont.cn/。

字体图标使用方法

以icomoon网站为例。

从网站中下载图标压缩包:点击右上角“IcoMoon App”按钮,进入字体图标选择页面。

icomoon网站首页

选中需要的图标(选中状态的图标,背景颜色会变白且出现黄色边框)后,个数可以选择1个,也可以选择多个。选好图标后,点击右下角“Generate Font ”按钮进入下载页面。

字体图标选择页面

点击右下角“download”按钮进行下载。

icomoon网站图标下载页面

解压下载好的压缩包。

字体图标下载文件解压后的文件夹

将解压好的文件夹整体添加到项目文件夹中,我没有单独设置字体文件夹,直接放在素材图片文件夹了。

项目文件夹目录

打开字体图标文件夹中style.css,

复制字体声明到html文件的style样式中,改变url的图标文件存放位置。

span标签中字体样式需要与字体声明中样式保持一致。

字体图标调用

在html文件中,span标签的内容是需要从网站中直接粘贴复制过来使用。在网站下载页面,鼠标点击就是选中状态,直接ctrl+c复制即可。

字体图标的代码样式调用

如此就是完整的字体图标使用过程。另外有阿里iconfont也可以使用,也是免费的。有兴趣可自行了解。

字体图标代码示例

<style>
  /* 字体声明 :从下载字体图标的文件夹中style.css文件上复制过来的*/
  @font-face {
    font-family: &39;icomoon&39;;
    src:  url(?toutiao/&);
    src:  url(?toutiao/&) format(&39;embedded-opentype&39;),
          url(?toutiao/&) format(&39;truetype&39;),
          url(?toutiao/&) format(&39;woff&39;),
          url(?toutiao/&) format(&39;svg&39;);
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  span {
    font-family: &39;icomoon&39;;
    font-size: 100px;
    color: antiquewhite;
  }
</style>

span标签的内容就是从字体图标上粘贴下来的

代码运行效果图

好了,今天的学习就到这里了,下回学习CSS三角~

TAG: css,鼠标,样式,选中,大,有学问,搜索,创作,
版权声明

本文仅代表作者观点,不代表蜻蜓百科-做你身边的百科发动机立场。
本文系作者授权蜻蜓百科-做你身边的百科发动机发表,未经许可,不得转载。

已有 40条评论
Copyright Your WebSite.Some Rights Reserved. Powered By 蜻蜓百科heme By 京ICP备11041704号-42