|
|
|
|
|
<!DOCTYPE html>
|
|
|
<!-- 声明文档类型为HTML5，这是HTML页面的标准声明，告诉浏览器如何解析和渲染页面 -->
|
|
|
<html>
|
|
|
<!-- <html>标签是HTML页面的根元素，所有其他HTML元素都是其子元素 -->
|
|
|
<head>
|
|
|
<!-- <head>标签包含了文档的元数据（meta-information），如字符集、标题、样式表链接等 -->
|
|
|
<meta charset="utf-8"/>
|
|
|
<!-- <meta>标签用于指定文档的字符编码为UTF-8，这是一种国际通用的字符编码，支持多种语言的字符 -->
|
|
|
<title>IconFont</title>
|
|
|
<!-- <title>标签定义了文档的标题，这个标题会显示在浏览器的标签栏或标题栏上 -->
|
|
|
<link rel="stylesheet" href="demo.css">
|
|
|
<!-- <link>标签用于链接外部样式表（CSS文件），这里链接的是名为"demo.css"的样式表文件 -->
|
|
|
|
|
|
<style type="text/css">
|
|
|
<!-- <style>标签用于在HTML文档中嵌入CSS样式 -->
|
|
|
|
|
|
@font-face {
|
|
|
/* @font-face是一个CSS规则，它允许你定义自己的字体，并指定字体文件的路径和格式 */
|
|
|
font-family: "iconfont";
|
|
|
/* font-family属性定义了字体的名称，这里定义的字体名称为"iconfont" */
|
|
|
|
|
|
src: url('iconfont.eot'); /* IE9及以下版本使用EOT格式的字体文件 */
|
|
|
/* src属性指定了字体文件的路径和格式 */
|
|
|
|
|
|
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8使用带嵌入OpenType格式的EOT字体文件 */
|
|
|
url('iconfont.woff') format('woff'), /* Chrome和Firefox支持WOFF格式的字体文件 */
|
|
|
url('iconfont.ttf') format('truetype'), /* Chrome、Firefox、Opera、Safari、Android和iOS 4.2+支持TrueType格式的字体文件 */
|
|
|
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1及以下版本支持SVG格式的字体文件 */
|
|
|
/* 注意：这里的src属性被重复使用了多次，实际上在@font-face规则中，src属性应该只出现一次，
|
|
|
但可以通过逗号分隔多个字体文件路径和格式。这里的写法可能是为了突出展示不同浏览器支持的字体格式，
|
|
|
但在实际使用中应该合并为一个src属性，例如：
|
|
|
src: url('iconfont.eot'); src: url('iconfont.eot#iefix') format('embedded-opentype'),
|
|
|
url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'),
|
|
|
url('iconfont.svg#iconfont') format('svg');
|
|
|
但正确的合并方式应该是：
|
|
|
src: url('iconfont.eot'); /* IE9 Compat Modes */
|
|
|
url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
|
url('iconfont.woff') format('woff'), /* Super Modern Browsers */
|
|
|
url('iconfont.ttf') format('truetype'), /* Safari, Android, iOS */
|
|
|
url('iconfont.svg#iconfont') format('svg'); /* Legacy iOS */
|
|
|
并且注意，第一个src后的分号应该是逗号（但在实际规则中，我们只需要一个src属性，用逗号分隔不同的文件路径和格式）。
|
|
|
这里的注释是为了解释，实际代码应该按照正确的格式书写。 */
|
|
|
}
|
|
|
|
|
|
.iconfont {
|
|
|
/* 定义字体家族为"iconfont"，用于应用图标字体 */
|
|
|
font-family: "iconfont" !important;
|
|
|
/* 使用!important是为了提高该规则的优先级，确保它不会被其他样式覆盖 */
|
|
|
|
|
|
/* 设置字体大小为16像素 */
|
|
|
font-size: 16px;
|
|
|
|
|
|
/* 设置字体样式为正常（非斜体） */
|
|
|
font-style: normal;
|
|
|
|
|
|
/* 在WebKit内核的浏览器中启用抗锯齿平滑处理，使字体边缘更平滑 */
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
|
/* 设置文本描边宽度为0.2像素（在WebKit内核的浏览器中有效），但通常用于放大效果 */
|
|
|
/* 注意：在大多数情况下，文本描边可能不是必需的，且可能因浏览器支持而异 */
|
|
|
-webkit-text-stroke-width: 0.2px;
|
|
|
|
|
|
/* 在Mac OS X的Firefox浏览器中启用灰度平滑处理，以减少字体渲染时的彩色边缘 */
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
}
|
|
|
|
|
|
/* CSS样式块结束 */
|
|
|
</style>
|
|
|
|
|
|
/* HTML文档的头部区域结束 */
|
|
|
</head>
|
|
|
|
|
|
/* HTML文档的主体区域开始 */
|
|
|
<body>
|
|
|
<!-- 定义一个具有"main"和"markdown"类的div容器，用于包含主要内容 -->
|
|
|
<div class="main markdown">
|
|
|
<!-- 定义一个一级标题，显示文本为"IconFont 图标" -->
|
|
|
<h1>IconFont 图标</h1>
|
|
|
<!-- 定义一个无序列表，具有"icon_lists"和"clear"类，用于包含图标列表 -->
|
|
|
<ul class="icon_lists clear">
|
|
|
|
|
|
<!-- 列表项开始，每个列表项包含一个图标、名称和代码 -->
|
|
|
<li>
|
|
|
<!-- 定义一个图标，使用"icon"和"iconfont"类，并显示特定的图标字符 -->
|
|
|
<i class="icon iconfont"></i>
|
|
|
<!-- 显示图标的名称 -->
|
|
|
<div class="name">show-password </div>
|
|
|
<!-- 显示图标的Unicode代码 -->
|
|
|
<div class="code">&#xea3f;</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- 类似的列表项，包含不同的图标、名称和代码 -->
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">user</div>
|
|
|
<div class="code">&#xe89a;</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">users</div>
|
|
|
<div class="code">&#xe8b5;</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">password-b</div>
|
|
|
<div class="code">&#xe66c;</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">06商品</div>
|
|
|
<div class="code">&#xe888;</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">25单据</div>
|
|
|
<div class="code">&#xe89b;</div>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
<!-- 列表项开始，用于显示一个图标及其相关信息 -->
|
|
|
<li>
|
|
|
<!-- 定义一个图标元素，使用"icon"和"iconfont"类来应用图标字体的样式 -->
|
|
|
<!-- 字符实体""代表在iconfont字体中定义的特定图标 -->
|
|
|
<i class="icon iconfont"></i>
|
|
|
|
|
|
<!-- 显示图标的名称，这里是"28体积、空间" -->
|
|
|
<!-- 这个名称可能用于描述图标所代表的含义或用途 -->
|
|
|
<div class="name">28体积、空间</div>
|
|
|
|
|
|
<!-- 显示图标的Unicode代码，这里是"&#xe89f;" -->
|
|
|
<!-- 注意：在HTML中，"&"符号需要被转义为"&"，所以Unicode代码前面有"&" -->
|
|
|
<div class="code">&#xe89f;</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- 另一个列表项开始，用于显示另一个图标及其相关信息 -->
|
|
|
<li>
|
|
|
<!-- 定义一个图标元素，使用"icon"和"iconfont"类 -->
|
|
|
<!-- 字符实体""代表另一个在iconfont字体中定义的图标 -->
|
|
|
<i class="icon iconfont"></i>
|
|
|
|
|
|
<!-- 显示图标的名称，"225默认头像" -->
|
|
|
<div class="name">225默认头像</div>
|
|
|
|
|
|
<!-- 显示图标的Unicode代码 -->
|
|
|
<div class="code">&#xe8c9;</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- 又一个列表项开始 -->
|
|
|
<li>
|
|
|
<!-- 定义一个图标元素，字符实体""代表另一个图标 -->
|
|
|
<i class="icon iconfont"></i>
|
|
|
|
|
|
<!-- 显示图标的名称，"406报表" -->
|
|
|
<div class="name">406报表</div>
|
|
|
|
|
|
<!-- 显示图标的Unicode代码 -->
|
|
|
<div class="code">&#xe902;</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- 最后一个列表项 -->
|
|
|
<li>
|
|
|
<!-- 定义一个图标元素，字符实体""代表锁填充图标 -->
|
|
|
<i class="icon iconfont"></i>
|
|
|
|
|
|
<!-- 显示图标的名称，"lock_fill" -->
|
|
|
<div class="name">lock_fill</div>
|
|
|
|
|
|
<!-- 显示图标的Unicode代码 -->
|
|
|
<div class="code">&#xe709;</div>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
<h2 id="unicode-">unicode引用</h2>
|
|
|
<hr>
|
|
|
|
|
|
<p>unicode是字体在网页端最原始的应用方式，特点是：</p>
|
|
|
<ul>
|
|
|
<li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
|
|
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
|
|
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
|
|
|
</ul>
|
|
|
<blockquote>
|
|
|
<p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
|
|
|
</blockquote>
|
|
|
<p>unicode使用步骤如下：</p>
|
|
|
<h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
|
|
|
<pre><code class="lang-js hljs javascript">@font-face {
|
|
|
font-family: <span class="hljs-string">'iconfont'</span>;
|
|
|
src: url(<span class="hljs-string">'iconfont.eot'</span>);
|
|
|
src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
|
|
|
url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
|
|
|
url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
|
|
|
url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
|
|
|
}
|
|
|
</code></pre>
|
|
|
<h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
|
|
|
<pre><code class="lang-js hljs javascript">.iconfont{
|
|
|
font-family:<span class="hljs-string">"iconfont"</span> !important;
|
|
|
font-size:<span class="hljs-number">16</span>px;font-style:normal;
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
-webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
}
|
|
|
</code></pre>
|
|
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
|
|
<pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre>
|
|
|
|
|
|
<blockquote>
|
|
|
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
|
|
|
</blockquote>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html>
|
