在网页中使用特殊中文字体成为可能

转载 http://www.cnblogs.com/Kummy/p/4442142.html

??以前还不知道这种办法的时候,如果要在网页中显示特殊中文字体的话,需要导入整个全部的.ttf字体文件,而文件高达好几兆,根本是不可取的,偶然间看到以上链接的文章,新的思路新的方法,将网页中需要用特殊字体的中文文字,进行打包压缩。

1.安装font-spider

npm install font-spider -g

2.在css中使用webfont

@font-face{
    font-family: ‘pinghei‘;
    src: url(‘../font/pinghei.eot‘);
    src:
        url(‘../font/pinghei.eot?#font-spider‘) format(‘embedded-opentype‘),
        url(‘../font/pinghei.woff‘) format(‘woff‘),
        url(‘../font/pinghei.ttf‘) format(‘truetype‘),
        url(‘../font/pinghei.svg‘) format(‘svg‘);
    font-weight: normal;
    font-style: normal;
}
// 指定字体并使用
.pinghei {
    font-family: ‘pinghei‘;
}
// ../font 都是相对路径,看文件相对位置
// 其中.ttf文件是必须要有的,根据设计稿的字体在网上下载对应的.ttf文件,其他都是生成的

3.运行font-spider命令

font-spider *.html

4.温馨提示

运行font-spider命令后,会自动生成相关文件,而其中的字体只包括只包括只包括页面中出现并引用字体的文字,如果后面新增了其他文字,需要重新运行命令

原文地址:https://www.cnblogs.com/shenmissing/p/9037288.html

时间: 2024-10-01 11:48:06

在网页中使用特殊中文字体成为可能的相关文章

css样式中如何设置中文字体?

代码如下: .selector{ font-family: SimHei,"微软雅黑",sans-serif; } 注意:加上中文名“微软雅黑”是为了兼容opera浏览器,中文字体名必须加上引号(单引号双引号都可以). MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果. 在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名: 华文细黑:STHeiti Light [STXihei] 华文黑体:STH

css中font-family的中文字体

说到css中的font-family,相信很多朋友经常用,但不知道当你遇到引用中文字体的时候你会怎么写?最近特别关注了下,发现最常用的基本有三种类型: 1.直接中文: 2.英文形式: 3.unicode码: 前面两种形式很好理解,unicode码是什么意思呢?下面看基本定义: Unicode(统一码.万国码.单一码)是一种在计算机上使用的字符编码.它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言.跨平台进行文本转换.处理的要求. 更多内容请查看百度百科对Unicode的介绍.

python 正则表达式 提取网页中标签的中文

转载请注明出处 http://www.cnblogs.com/pengwang57/. >>> p= re.compile(r'\<div class="comment-content comment-content_new"\>([^x00-xff]*)\<\/div\>') >>> text='<div class="comment-content comment-content_new">

css常用中文字体的英文名称写法

我们知道网页中使用中文字体最好用其对应的英文名称,这样可以避免出现编码问题导致样式中的中文名称出现乱码,从而不识别.下面是网页中常用的中文字体所对应的英文名称.留着,不用翻资料了 中文 英文 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSo

Web开发中常用中文字体名称的英文对应

说明: 加上中文名"微软雅黑"是为了兼容opera. MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果. 在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名: Mac OS: 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 儷黑 Pro:LiHei Pro Medium 儷宋 Pr

css设置中文字体(font-family:&quot;黑体&quot;)后样式失效问题

做项目时偶遇的一诡异问题,同样的代码,在ff和IE7以上页面显示正常,但IE6无论怎么改都不起作用,本来以为是IE6的某些浮动bug所致,结果弄了很长时间也不行,后来不经意间把原来设定的font-family: "黑体"属性去掉了,一切恢复正常...到网上搜了下,还真有不少人遇到同样的问题,下面摘录一段: css文件里font-family: "黑体";这句会导致后面的css定义全部不起作用了.只要把font-family: "黑体";改成fon

css设置各种中文字体如雅黑、黑体、宋体、楷体等等

.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 说明: 加上中文名"微软雅黑"是为了兼容opera. MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果. 在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名: Mac OS的一些:

解决IE9支持CSS中文字体经验篇

如何让CSS中使用中文字体后仍然在IE9浏览器显示兼容.(音乐放松椅) 一.CSS中文字体IE9兼容出现问题CSS中使用中文字体后Line-height样式在IE9浏览器垂直上下居中样式失效. 二.解决IE9兼容中文字体将CSS中使用中文字体的中文字转化为Unicode编码然后替代.最终设置字体效果将不受转换编码而影响同时也兼容了Line-height垂直居中样式,同时IE9即可兼容CSS中使用常用中文字体.(音乐放松椅) 常见字体转换:黑体:\9ED1\4F53宋体:\5B8B\4F53微软雅

Css中常用中文字体的Unicode编码对照

在网页制作中,最常用的恐怕是字体属性了,在调整页面兼容的时候,也常常发现字体名称的原因导致不兼容或乱码,下面给出几种常用字体的ucicode编码对照,方便使用. 宋体 SimSun \5B8B\4F53 黑体 SimHei \9ED1\4F53 微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53 新宋体 NSimSun \65B0\5B8B\4F53 新细明体