HTML5中引入字体样式的常用方法 |
您所在的位置：网站首页 › fontfamily在html中怎么用 › HTML5中引入字体样式的常用方法 |
HTML5中引入字体样式的常用方法
|
网页需求常常需要一个图标，例如地址定位（图1）、购物车（图2）、下拉菜单（图3）
引入图片相对来说要麻烦和不便，针对这个问题往往有两个途径获得我们需要的文字图标，可对其进行文字样式编辑，使它变成我们想要的外观和尺寸。途径分别为 1）阿里巴巴的 Iconfont。贴一下地址：https://www.iconfont.cn/ (下图1) 2）国外网站的IcoMoon APP。贴一下地址:https://icomoon.io/app （下图2）
可以看到我们常用的图标几乎都可以在上面找到。 针对途径一，第一步：首先进行需要的图标选择，选择后会出现虚线框，点击购物车选择下载代码。解压之后得到font_t12jasspxmn命名样式的文件夹，打开文件夹 找到demo_index.html文件 ，打开
会发现自己选择的文件图标都在，并且在下面有***的文字代码。 第二步，在自己的工程html文件夹中style中添加如下代码： @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }必须要注意的是文件的路径，因此我们将之前的文件中放在工程文件夹中，并将上述代码的路径更改 @font-face { font-family: 'iconfont'; src: url('font_t12jasspxmn/iconfont.eot'); src: url('font_t12jasspxmn/iconfont.eot?#iefix') format('embedded-opentype'), url('font_t12jasspxmn/iconfont.woff2') format('woff2'), url('font_t12jasspxmn/iconfont.woff') format('woff'), url('font_t12jasspxmn/iconfont.ttf') format('truetype'), url('font_t12jasspxmn/iconfont.svg#iconfont') format('svg'); }
改好之后，我们就发现他自己生成的文件夹名乱七八糟，不如改成我们自己熟悉的font文件夹就行，路径也好写，为了偷懒我就不改了。 第三步，定义你要使用的文字样式。 .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }第四部，使用，用到哪个就输入哪个代码。 3下面说说针对第二中途径的方法。前面与第一种几乎一样。 差异主要在 参考这个就行，是在懒得写了：https://www.baidu.com/link?url=Ov4BzqRGZRXtenpkIq3Y5WQrt944f5e-Tza2Q2-T76AgrLnZ8w4RUviqGKXMg8xJEDhGIsG6T6smdWDcU5x2Um9Yx7P-kSw5J8AI2ZsLKEm&wd=&eqid=b5d9b6e200044577000000055ee9b112 |
【本文地址】
今日新闻 |
推荐新闻 |