嘘~ 正在从服务器偷取页面 . . .

如年
春节

静态博客-字体更换

Hexo
Hexo
发布日期:   2020-12-12
作者: Small-Rose / 张小菜
更新日期:   2020-12-12
文章字数:   3.6k
阅读时长:   13 分
阅读次数:  

关于网站更换字体，还是独立出来，并不是所有的人都有这种需要。

一、CSS 字体支持

CSS支持字体样式，通过@font-face属性在网页中嵌入自定义字体，主流的浏览器都支持这种方式，同时CSS字体属性还可以定义字体，加粗，大小，文字样式等。

默认支持:

body{
    font-family: "serif","sans-serif","cursive","fantasy","monospace";
}
body{
    font-family: "sans-serif,monospace,微软雅黑,黑体,宋体";
}
<body>

我喜欢的写法：

.myfont{
    font-family:"微软雅黑","黑体","宋体";
}

HTML 使用

<div class="myfont"> Hello World! 这个网站很酷 zhangxiaocai.cn </div>

二、字体文件格式

web字体常见格式

.ttf

TrueType (.ttf) 是Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

.eot

EOT – Embedded Open Type，嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染，浏览器根据 CSS 中 @font-face 的定义，下载，渲染这种 .EOT 后缀的字体文件。这些文件只在当前页活动的状态下，临时安装在用户的系统中。

.otf

OpenType是一种可缩放字型（scalable font）电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf，类型代码是OTTO，现行标准为OpenType 1.4。OpenType最初发表于1996年，并在2000年之后出现大量字体。它源于微软公司的TrueType Open字型，TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。

.woff

相对于 TrueType 和 OpenType ，WOFF（WOFF – Web Open Font Forma是一种Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在内的几乎所有主要的字体供应商都加入到支持 WOFF 的行列中来

.svg

顾名思义，就是使用SVG(Scalable Vector Graphics) 技术来呈现字体SVG Fonts ，还有一种gzip压缩格式的SVG字体.svgz。SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页可以更加精彩细致，使用简单的文本命令，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。

6、自定义引入

如果想使用自定义的字体，首先引入

@font-face {    
   font-family: 'myfont';    
   src:url('字体文件1.woff'),  
   url('字体文件2.ttf'),    
   url('字体文件3.eot');
}

body{
    font-family: 'myfont' ;
}

三、字体使用步骤

字体使用方式：

1、下载字体

可以在字体网站下载自己喜欢的字体：http://www.fonts.net.cn/

下载之后，一般是ttf格式，有些下载包是各种格式都有。

注意，字体的使用，要注意版权问题，不要使用未经许可的字体，一般来说，非商用没有太大问题，下载的时候注意是否使用付费。

文末整理了部分开源免费字体，仅供参考。

2、引入字体

引入字体也很简单，在css 文件引入即可。


@font-face{
    font-family: 'hl';
    src: url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/hl.ttf');
}

@font-face{
    font-family: 'ming';
    src: url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/GuDianMingChaoTi.otf');
}

针对元素使用

/* 针对全局的使用 */
body{
    font-family: 'YaHei';
}

/* 针对元素的class属性里包含 mytitle 的使用 */
.mytitle {
    font-family: 'ming' !important;
}

/* 针对元素的id属性等于 main-content 的使用 */

#main-content{
 font-family: '仿宋',"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",'sans-serif';
}

.diyFont{
    font-family: 'hl';
}

根据样式选择器使用使用即可。

如果引入字体路径没有问题，却无法显示

3、样式引用

<html>
<body>
    <div class='diyFont'><span>我是标题</span></div>
    <div id="main-content">
        我是文章内容,使用
    </div>
    <div>
        我使用全局默认的字体
    </div>
</body>
</html>

4、字体转换

如果你确认引入路径绝对正确，复制路径到浏览器执行，看看会不会出现下载提示，有下载提示或者显示说明正确。

如果不能显示可以尝试字体转换。

在线的字体转换工具：

多种格式引入参考：

@font-face{
    font-family: 'ming';
    src: url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/GuDianMingChaoTi.otf');
    src: url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/GuDianMingChaoTi.eof'), url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/GuDianMingChaoTi.woff'), url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/GuDianMingChaoTi.ttf'),/*non-IE*/
      url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/GuDianMingChaoTi.svg') format('svg');
}

四、附字体表

免费可商用的中文字体整理：

免责声明：

以下表格内容收集整理来自网络， 不保证实时性， 使用时建议查清字体使用相关授权说明。本站对读者使用不作任何建议。

字体授权或下载
思源系列思源黑体、思源宋体。授权出处,点我查看
思源系列思源柔黑体。授权出处,点我查看
思源系列思源真黑体。授权出处,点我查看
明朝系列App Mincho明源。授权出处,点我查看
明朝系列花园字体。授权出处,点我查看
明朝系列Oradano-Mincho明朝。授权出处,点我查看
明朝系列装甲明朝。授权出处,点我查看
明朝系列源界明朝。授权出处,点我查看
明朝系列源明朝。授权出处,点我查看
方正系列方正黑体、方正书宋、方正仿宋、方正楷体。
授权出处,点我查看
明体系列源样黑体、源流明体、源石黑体、源样明体、源云明体、源泉圆体。
授权出处,点我查看
中文系列M Plus。授权出处,点我查看
中文系列锐字真言体。授权出处,点我查看
中文系列可以商用，但不能在非Apple硬件上使用，否则就是侵权。
苹果官方说明链接 https://discussions.apple.com/thread/7493969
中文系列联盟起艺卢帅正锐黑体。授权出处,点我查看
中文系列Droid Sans Fallback。授权出处,点我查看
中文系列庞门正道标题体。授权出处,点我查看
中文系列庞门正道粗书体。授权出处,点我查看
中文系列问藏书房品牌字体。授权出处,点我查看
中文系列廻想体。https://moji-waku.com/kaiso/)
中文系列電字遊戯。https://moji-waku.com/denjiyugi/)
中文系列Mogiha用钢笔写的字体。http://ahito.com/item/desktop/font/mogihaPen/#kiyaku
中文系列KH像素字体系列。http://jikasei.me/font/kh-dotfont/)
站酷系列站酷酷黑、站酷快乐体、站酷高端黑、庆科黄油体、站酷小薇LOGO体、站酷文艺体。授权出处,点我查看
日式系列TanukiMagic 麥克筆手繪 POP。授权出处,点我查看
日式系列ラノベPOP 。授权出处,点我查看
日式系列怖い明朝体。授权出处,点我查看
日式系列暗黑恐字体。授权出处,点我查看
日式系列幻ノにじみ明朝。授权出处,点我查看
日式系列Rings Of Saturn。授权出处,点我查看
日式系列Smartfont。授权出处,点我查看
日式系列KanjyukuGothic。授权出处,点我查看
日式系列Shirokuma。授权出处,点我查看
日式系列超極細ゴシック体。授权出处,点我查看
日式系列平成最後。授权出处,点我查看
日式系列コーポレート・ロゴ（ラウンド）。https://moji-waku.com/ronde/)
日式系列トガリテ。https://moji-waku.com/pigmo/)
日式系列マメロン。https://moji-waku.com/mamelon/)
日式系列マキナス 4 シリーズ。https://moji-waku.com/makinas/)
日式系列ピグモ。https://moji-waku.com/pigmo01/)
日式系列Karakaze。https://enuoka.booth.pm/items/1219316
851系列851手写杂体。授权出处,点我查看
851系列851 mkpop。授权出处,点我查看
851系列851 letrogopage。授权出处,点我查看
851系列851 テガキカクット。授权出处,点我查看
851系列851 Chikuru Yoku。授权出处,点我查看
851系列851 チカラヨワク。授权出处,点我查看
851系列851 ゴチカクット。授权出处,点我查看
手写系列濑户字体。授权出处,点我查看
手写系列沐瑶软笔手写体。授权出处,点我查看
手写系列杨任东竹石体。授权出处,点我查看
手写系列包图小白体。授权出处,点我查看
手写系列手写体。授权出处,点我查看
手写系列贤二体。授权出处,点我查看
手写系列清松手寫體。授权出处,点我查看
手写系列台北黑体。授权出处,点我查看
刻石錄系列刻石錄顏體、刻石錄鋼筆鶴體、刻石錄明體
授权出处,点我查看
台湾教育部系列台湾教育部标准楷书
授权出处,点我查看
台湾教育部系列台湾教育部标准宋体
授权出处,点我查看
台湾教育部系列台湾教育部国字隶书
授权出处,点我查看
台湾教育部系列全字库正宋體、全字库正楷體
授权出处,点我查看
王汉宗系列免费字体：细明、超明、细黑、特黑、颜体、酷俪海报、正海报、钢笔行楷、超黑俏皮动物、中明注音体、中明破音字、中楷注音体、中楷破音字、中魏碑简体、细新宋简体
授权出处,点我查看
文泉驿系列文泉驿正黑体、文泉驿微米黑、文泉驿点阵宋体（此宋体无Win版本…）
授权出处,点我查看
阿里系列阿里巴巴普惠体。授权出处,点我查看
阿里系列阿里汉仪智能黑体（仅阿里平台免费商用）。授权出处,点我查看
45款华康字体（仅阿里平台免费商用）华康布丁体、华康彩带体 、华康儿风体、华康方圆体、华康钢笔体、华康海报体、华康手札体、华康手札体、华康翩翩体、华康黑体 、华康金文体、华康楷体、华康勘亭流、华康俪金黑、华康隶书体、华康龙门石碑、华康墨字体、华康POP1体、华康POP2体、华康POP3体、华康少女文字、华康饰艺体、华康瘦金体、华康标题宋、华康宋体、华康唐风隶、华康娃娃体、华康魏碑、华康正颜楷体、华康雅宋体、华康雅艺体、华康圆体、华康新综艺体
授权出处,点我查看
汉仪系列18款汉仪字体（仅京东平台免费使用）
汉仪中黑(简/繁)、汉仪细简黑(简)、汉仪中简黑(简)、汉仪楷体(简/繁)、汉仪书宋一(简)、汉仪书宋二(繁)、汉仪粗仿宋(简)、汉仪水滴体(简/繁)、汉仪珍珠隶(简/繁)
授权出处,点我查看
白舟書体四季词这款字体共28款，分春夏秋冬四季，很漂亮。但只能在用于节日庆祝的创作上。想免费商用的需要发邮件联系
授权出处,点我查看
其他寒蝉手拙体。 授权出处,点我查看
其他卓健橄榄简体。授权出处,点我查看
其他康康体。授权出处,点我查看
其他令东齐汲体。授权出处,点我查看
其他阿朱泡泡字。授权出处,点我查看
其他马善政毛笔楷书。授权出处,点我查看
其他小杉。授权出处,点我查看
其他钟齐志莽行书。授权出处,点我查看
其他钟齐流江毛草。授权出处,点我查看
其他英椎楷書。授权出处,点我查看
其他英椎行書。授权出处,点我查看
其他衡山毛筆フォント。授权出处,点我查看
其他青柳疎石フォント。授权出处,点我查看
其他青柳衡山フォントT。授权出处,点我查看
其他衡山毛筆フォント草書。授权出处,点我查看
其他中文像素字体。授权出处,点我查看
其他香港民間字集。授权出处,点我查看
其他有爱魔兽黑体。授权出处,点我查看
其他有爱魔兽锐方。授权出处,点我查看
其他有爱魔兽圆体。授权出处,点我查看
其他有爱圆体。授权出处,点我查看
其他自由香港楷書。授权出处,点我查看
其他jf open 粉圓字型。授权出处,点我查看
其他思源屏显臻宋.授权出处,点我查看

相关文章



文章作者: Small-Rose / 张小菜
文章链接: https://notes.zhangxiaocai.cn/posts/8f5c11d2.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY-SA 4.0 许可协议。转载请注明来源 Small-Rose / 张小菜 !
Hexo
赏
评论
  目录