当前位置: 首页> 汽车> 新车 > 企业vis是指什么_西安最新招聘信息今天_google推广费用_百度优化插件

企业vis是指什么_西安最新招聘信息今天_google推广费用_百度优化插件

时间:2025/7/12 2:32:36来源:https://blog.csdn.net/qq_36260963/article/details/147403217 浏览次数: 0次
企业vis是指什么_西安最新招聘信息今天_google推广费用_百度优化插件

web字体

  • 使用以前 CSS 的版本,网页设计师不得不使用用户计算机上已经安装的字体。

  • 使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。

  • 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。

  • 您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

  • 您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.

Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型)。

Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.

注意: Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

一、基本使用

可以通过 @font-face 指定字体的具体地址,浏览器会自动下载该字体,这样就不依赖用户电脑上的字
体了。

  • 将我们提前需要用到的字体传到服务器
  • 在需要用到的地方引入

弊端:字体过大,耗费流量

  • 简写方式

    @font-face {
    font-family: “情书字体”;
    src: url(‘./方正手迹.ttf’);
    }

  • 高兼容性写法

    @font-face {
    font-family: “atguigu”;
    font-display: swap;
    src: url(‘webfont.eot’); /* IE9 /
    src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), /
    IE6-IE8 /
    url(‘webfont.woff2’) format(‘woff2’),
    url(‘webfont.woff’) format(‘woff’), /
    chrome、firefox /
    url(‘webfont.ttf’) format(‘truetype’), /
    chrome、firefox、opera、Safari,
    Android*/
    url(‘webfont.svg#webfont’) format(‘svg’); /* iOS 4.1- */
    }

代码

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1.基本使用</title><style>p {font-size: 40px;}@font-face {font-family: 'lq-font';src: url(./font1/方正手迹.ttf);}.box2 {font-family: 'lq-font';}</style>
</head>
<body><p class="box1">春风得意马蹄疾,一日看尽长安花</p><p class="box2">春风得意马蹄疾,一日看尽长安花</p>
</body>

效果

在这里插入图片描述

结论

我们看到上边是没有使用字体的演示,下发为使用了字体后的展示;

如果我们一直保存可以看到下边字体出现闪动情况,如果这个时候我们将network调整为 3G 我们可以很明显的看到字体过了一会才变为我们需要后的样式;

二、定制字体

  • 中文的字体文件很大,使用完整的字体文件不现实,通常针对某几个文字进行单独定制。
  • 可使用阿里 Web 字体定制工具:https://www.iconfont.cn/webfont

实际上就是按需引入,我需要什么字体就提前生成好

使用方法

在这里插入图片描述

  • 我们将下载后的文件是一个zip解压后里面有 ttf和woff文件
    在这里插入图片描述

代码

 <style>p {font-size: 40px;}@font-face {font-family: "webfont";font-display: swap;src: url('./font/webfont.eot'); /* IE9 */src: url('./font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('./font/webfont.woff2') format('woff2'),url('./font/webfont.woff') format('woff'), /* chrome、firefox */url('./font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('./font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */}.t2 {font-family: 'webfont';}</style>
</head>
<body><p class="t1">英雄难过美人关,我不是英雄,美人让我过了关</p><p class="t2">英雄难过美人关,我不是英雄,美人让我过了关</p>
</body>

效果

在这里插入图片描述

三、字体图标

  • 相比图片更加清晰。
  • 灵活性高,更方便改变大小、颜色、风格等。
  • 兼容性好, IE 也能支持
  • 阿里图标官网地址:https://www.iconfont.cn/

基本使用方法

在这里插入图片描述

在这里插入图片描述

下载后本地引入

Unicode 方式

该方式引入后图标没有颜色,引入比较繁琐,而且我们根本不知道&#xe60d对应的是什么

效果

在这里插入图片描述

代码
  <title>字体图标本地方式1-无颜色</title><style>@font-face {font-family: 'iconfont';src: url('./font/iconfont.woff2?t=1745211806231') format('woff2'),url('./font/iconfont.woff?t=1745211806231') format('woff'),url('./font/iconfont.ttf?t=1745211806231') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 50px;}</style></head>
<body><span class="iconfont">&#xe60d;</span><span class="iconfont">&#xe60e;</span><span class="iconfont">&#xe611;</span><span class="iconfont">&#xe612;</span>
</body>

Font class 方式

改方式引入也没有颜色,但是 可以自定义class的名称,起码自己认识 ,需要引入一个css文件

效果

在这里插入图片描述

代码
  <title>字体图标本地方式2-无颜色</title><link rel="stylesheet" href="./font/iconfont.css"><style>.iconfont {font-size: 50px;}</style></head>
<body><span class="iconfont icon-shouxinhoujiance"></span> <span class="iconfont icon-xiaoxidingyue"></span> <span class="iconfont icon-zhuanxiangpaicha"></span> <span class="iconfont icon-zhuandaiguanli"></span> 
</body>

Symbol 方式

该方式可以显示颜色,但是兼容性不是特别好,需要引入一个js文件

效果

在这里插入图片描述

代码
<title>字体图标本地方式3-彩色</title><script src="./font/iconfont.js"></script><style>.icon {width: 50px;}</style></head>
<body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shouxinhoujiance"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiaoxidingyue"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhuanxiangpaicha"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhuandaiguanli"></use></svg>

在线引用

我们可以不把font字体放到我们项目里面,直接使用阿里云在线服务器,但是不能保证稳定性!

Unicode 方式

跟上面本地引入效果一样,只不过我们写的地址是在线地址

效果

在这里插入图片描述

代码
 <title>字体图标本地方式1-无颜色</title><style>/* 在线链接服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */@font-face {font-family: 'iconfont';  /* Project id 4900244 */src: url('//at.alicdn.com/t/c/font_4900244_gsa9vspr5mp.woff2?t=1745214104002') format('woff2'),url('//at.alicdn.com/t/c/font_4900244_gsa9vspr5mp.woff?t=1745214104002') format('woff'),url('//at.alicdn.com/t/c/font_4900244_gsa9vspr5mp.ttf?t=1745214104002') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 50px;}</style></head>
<body><span class="iconfont">&#xe60d;</span><span class="iconfont">&#xe60e;</span><span class="iconfont">&#xe611;</span><span class="iconfont">&#xe612;</span>
</body>

Font class 方式

上上方一样,看地址变为在线了

效果

在这里插入图片描述

代码
 <title>字体图标本地方式2-无颜色</title><link rel="stylesheet" href="//at.alicdn.com/t/c/font_4900244_gsa9vspr5mp.css"><style>.iconfont {font-size: 50px;}</style></head>
<body><span class="iconfont icon-shouxinhoujiance"></span> <span class="iconfont icon-xiaoxidingyue"></span> <span class="iconfont icon-zhuanxiangpaicha"></span> <span class="iconfont icon-zhuandaiguanli"></span> 
</body>

Symbol 方式

可以显示颜色

效果

在这里插入图片描述

代码
  <title>字体图标本地方式3-彩色</title><script src="//at.alicdn.com/t/c/font_4900244_gsa9vspr5mp.js"></script><style>.icon {width: 50px;}</style></head>
<body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shouxinhoujiance"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiaoxidingyue"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhuanxiangpaicha"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhuandaiguanli"></use></svg>
</body>
关键字:企业vis是指什么_西安最新招聘信息今天_google推广费用_百度优化插件

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: