不论是网页还是其他的应用，在前端开发中往往会涉及到特殊字体的设置。仅仅只是用微软雅黑或者是宋体等等已经满足不了日常设计的需求了。所以使用特定的“font-family”在前端开发中有着一定的意义。
本人在使用Github的博客时接触到了自定义好看的英文字体，并对此有一些总结。总结如下。
比如以下这个网站介绍了15款好看的英文字体，并且给出了字体的下载链接。
在下载之后得到字体的ttf或者otf文件。这是用于系统安装使用字体的文件。如果想要在本机系统环境使用这些字体，则只需双击安装即可。
如果想要使用在页面前端开发中，还需要经过一些处理。
进入如下网站 freefontconverter
将之前下载的ttf或otf文件上传至网站后，点击font converter字样即可下载，得到几个额外文件。
以 ffad_mator字体为例：
点击上图“Select a font file to convert”上传字体ttf或otf文件，之后点击“Font Convrt”下载得到一个压缩包。
解压获得如下文件
首先将解压获得的文件夹放置在fonts文件夹中，并创建想要文件，文件树状图如下。
首先编写css文件
/* ffad_matro字体 */
@font-face {
font-family: 'ffad_matroregular';
src: url('../fonts/ffad_matro/ffad_matro-webfont.eot'); /* IE9 Compat Modes */
src: url('../fonts/ffad_matro/ffad_matro-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/ffad_matro/ffad_matro-webfont.woff2') format('woff2'),
url('../fonts/ffad_matro/ffad_matro-webfont.woff') format('woff'),/* Modern Browsers */
url('../fonts/ffad_matro/ffad_matro-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
url('../fonts/ffad_matro/ffad_matro-webfont.svg#ffad_matroregular') format('svg');/* Legacy iOS */
font-weight: normal;
font-style: normal;
}
然后编写html文件，并关联二者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>英文字体</title>
<link rel="stylesheet" type="text/css" href="css/1.css">
</head>
<body>
<a style="font-family: ffad_matroregular">
ffad_matroregular
</a>
</body>
</html>
这样，就可以在网页中显示出自定义英文字体了
这就是网页中的相关显示了。
推荐几个好看的英文字体。如要下载字体，欢迎到本人的Github进行下载使用。
css源码：
/* 英文字体 */
/* Abys字体 （做标题不错，而且字母全是大写的）*/
@font-face {
font-family: 'abysregular';
src: url('../fonts/abys/abys-regular.woff2') format('woff2'),
url('../fonts/abys/abys-regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* ffad_matro字体 （潇洒的英文字体） */
@font-face {
font-family: 'ffad_matroregular';
src: url('../fonts/ffad_matro/ffad_matro-webfont.eot'); /* IE9 Compat Modes */
src: url('../fonts/ffad_matro/ffad_matro-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/ffad_matro/ffad_matro-webfont.woff2') format('woff2'),
url('../fonts/ffad_matro/ffad_matro-webfont.woff') format('woff'),/* Modern Browsers */
url('../fonts/ffad_matro/ffad_matro-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
url('../fonts/ffad_matro/ffad_matro-webfont.svg#ffad_matroregular') format('svg');/* Legacy iOS */
font-weight: normal;
font-style: normal;
}
/* fofermedium字体 （类似于漫画字体，字体小） */
@font-face {
font-family: 'fofermedium';
src: url('../fonts/fofer/fofer-webfont.woff2') format('woff2'),
url('../fonts/fofer/fofer-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* love-trust字体 （和fofermedium字体很像）*/
@font-face {
font-family: 'love-trustregular';
src: url('../fonts/love-trust/love-trust.eot');
src: url('../fonts/love-trust/love-trust.eot?#iefix') format('embedded-opentype'),
url('../fonts/love-trust/love-trust.woff2') format('woff2'),
url('../fonts/love-trust/love-trust.woff') format('woff'),
url('../fonts/love-trust/love-trust.ttf') format('truetype'),
url('../fonts/love-trust/love-trust.svg#ffad_matroregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* rockfireregular字体 （中规中矩） */
@font-face {
font-family: 'rockfireregular';
src: url('../fonts/rockfire/rockfire-regular-webfont.woff2') format('woff2'),
url('../fonts/rockfire/rockfire-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* wolf-in-the-city-light字体 （所谓的英文花体） */
@font-face {
font-family: 'wolf-in-the-city-lightregular';
src: url('../fonts/wolf-in-the-city-light/wolf-in-the-city-light.eot');
src: url('../fonts/wolf-in-the-city-light/wolf-in-the-city-light.eot?#iefix') format('embedded-opentype'),
url('../fonts/wolf-in-the-city-light/wolf-in-the-city-light.woff2') format('woff2'),
url('../fonts/wolf-in-the-city-light/wolf-in-the-city-light.woff') format('woff'),
url('../fonts/wolf-in-the-city-light/wolf-in-the-city-light.ttf') format('truetype'),
url('../fonts/wolf-in-the-city-light/wolf-in-the-city-light.svg#ffad_matroregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* yellowtail字体 （另一种花体）*/
@font-face {
font-family: 'yellowtailregular';
src: url('../fonts/yellowtail/yellowtail-regular.eot');
src: url('../fonts/yellowtail/yellowtail-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/yellowtail/yellowtail-regular.woff2') format('woff2'),
url('../fonts/yellowtail/yellowtail-regular.woff') format('woff'),
url('../fonts/yellowtail/yellowtail-regular.ttf') format('truetype'),
url('../fonts/yellowtail/yellowtail-regular.svg#ffad_matroregular') format('svg');
font-weight: normal;
font-style: normal;
}
网页显示效果如下图：
有的适合用于标题，有的适合用于正文，有的用于插图。看个人喜好，不喜勿喷。
如果看到这篇文章还有什么疑问想要寻求帮助的，欢迎联系本人。微博、qq、微信在文章末尾处。欢迎来告诉我你的想法。
如需转载，请注明出处，谢谢。