html 字体样式引用,CSS3 关于@font-face引用中文字体解决办法

有两种方法，一种简单的，一种比较复杂，都可以实现(注：这里的方法只适合使用少量的中文字体，如果使用的字量过大，请使用其他方法解决)

第一种：简单的

1.下载需要的中文字体的.ttf格式，这个都不难找到，百度上一搜一大片，都可以下载到。

2.下载fontforge软件，这个软件可以编辑字体，字体文件内存一般都比较大，直接使用会导致网速加载速度变慢，使用这个字体编辑软件的目的就是将需要的字体提取出来，可以解决字体内存变小，从而不影响加载速度。

3.打开AI，写一个自己需要的文字，如图，我这里使用的方正姚体，将写好的字体转化成轮廓(在字体上单机右键—>创建轮廓)，然后将文字保存成.svg格式。

4.打开下载好的fontforge软件，新建一个新的空白字体文件，查看过@font-face引用字体源文件的同学应该知道，字体或者icon在代码中引用都是用符号代替的，也就是这边字体符号，新建的字体文件中建议从A开始做字体，这样方便后期代码中书写，双击A下面的框，弹出一个字体编辑窗口，点击File—>Import，导入刚才用AI保存的.svg格式文件，导入字体。(注：选择导入字体类型)

导入字体成功

如上方法将需要的字体全部导入后保存成.ttf格式(点击File—>Generate Fonts)。(注：1.这里要保存成.ttf格式，如下图；2.编辑好的字体建议截图保存，方便后期文字修改查找所对应的字符)

编辑字体的工作到这里就结束了。

5.使用fontsquirrel在线转换软件将.ttf格式转换成需要的格式.eot .woff .svg .ttf等页面中所需要的格式。(注：fontsquirrel在线转换软件网址：http://www.fontsquirrel.com/tools/webfont-generator)，转换完成保存压缩包到需要的文件下，这里文件包会自动生成一个stylesheet.css文件，文件中已经将字体引用好了，直接使用即可。

第二种：复杂的

1.将下载好的.ttf文件用fontforge字体编辑软件打开，在fontforge中新建一个空白字体文件，将打开的.ttf中所需要的文字双击打开编辑窗口，点击File—>Export将字体导出成.svg格式。在空白字体文件中，双击A下面的框，弹出字体编辑窗口，点击File—>Import将字体导入的文件中，在这里寻找自己需要的文字可能会费大量的时间。(注：这里不能从.ttf文件中直接拷贝字体到新建空白字体文件中，这样字体会变小，建议先导出，再导入)。

2.如上方法，将需要的字体重新编排在新建的文件中再保存成.ttf格式，会使字体文件的内存变小，方便使用。

3..ttf字体文件转换其他格式的方法请查看第一种方法步骤5。

两种方法都可以实现中文字体转换，使用@font-face方法和英文字体引用方式一样。

html 字体样式引用,CSS3 关于@font-face引用中文字体解决办法相关推荐

Typora修改中文字体样式（含代码块中的中文字体）
Typora修改字体样式(含代码块中的字体) 1. 修改页面字体显示偏好设置 →外观,找到主题一栏,打开主题文件夹,选择你当前主题下的*.CSS*文件.如我使用的是github主题,则我打开gith ...
matplotlib的Text、FontProperties对象、字体（font）属性|中文字体的设置|图像标题、label字体的设置
matplotlib.text.Text对象见文档描述matplotlib.text 设置Text字体性质的方法有两个: Text.set(xxx=value) Text.set_xxx(value ...
python中文字体下载_Python在Matplotlib图中显示中文字体的操作方法
1. 说明本篇主要针对在Ubuntu系统中,matplotlib显示不了中文的问题,尤其是在无法安装系统字体的情况下,解决Python绘图时中文显示的问题. 2. 在系统中安装字体 $ fc-lis ...
vue.js 引用背景图 background 无效的3种解决办法
#vue.js项目中,出现css调用background背景图无效?如何解决? 或者调用<img>标签,也无效果? 直接上代码,自行对比查找一下: 效果图预览 1. 正确的代码,示例如下: ...
vscode自动加前缀_详解VScode自动补全CSS3前缀插件以及配置无效的解决办法
1.在vscode中搜索Autoprofixer 2.在安装完成之后要配置在需要添加前缀的css文件上,右键点击命令面板,输入Autoprefixer CSS就好啦 ps: 如果想要兼容性最好的话, ...
对于引用的控件被拒绝访问的解决办法的补充(续)
在上个月,我曾经写过"对于引用的控件被拒绝访问的解决办法的补充", 见http://liuyuer.cnblogs.com/archive/2005/10/12/253063.ht ...
【ttf 压缩】html网页引用中文字体，文件过大，加载缓慢的解决办法【字蛛】【web font】
[以下有部分内容引用的网络文章] 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题, ...
android html字体大小,android Html.fromHtml font 标签支持设置字体大小和颜色
由于在android 中的Html源码中对html标签的支持不是很完全,在使用textview加载html自定义字体样式的时候遇到坑了,就是font标签不支持size属性,查看源码中发现没有去解析si ...
RTF富文本中字体样式设置为-apple-system-font导致IOS客户端显示字体异常
发现该段内容的font-famliy中有一些其他字体,如-apple-system-font -apple-system.BlinkMacSystemFont 是什么东东?根据 Webkit 博客,- ...
sublime text3 字体样式_Sublime Text3 Github最受欢迎主题字体推荐！
下面由sublime教程栏目给大家推荐Sublime Text3 主题 Material 字体 Fira Code!,希望对需要的朋友有所帮助! Sublime Text3 主题 Material ...

html 字体样式引用,CSS3 关于@font-face引用中文字体解决办法

html 字体样式引用,CSS3 关于@font-face引用中文字体解决办法相关推荐

最新文章

热门文章