给网站添加一个字体,网页中如何显示系统不自带的字体?

今天给公司开发了一个官方网站,是中英文版的官方网站,因为咱们Boss是新加坡的华侨,所以他多半的朋友伙伴也是新加坡或是美国那边的朋友,开发英文版本的网站那肯定是一个必然了,但他要求英文网站最好是使用Arial做为默认字体(Arial字体没有尖角),所以接下来我把实现的方法这里留一下笔记,以便有需要的朋友或是后期自己复看,如何给网站添加系统不自带的英文字体或中文字体,这个方法都是一样的了。

首先把这个网站平面图载一下,大概分为中英文版本:

中文版本:

区块链官方网站特殊字体设计
中英文区块链官方网站特殊字体实现方法

英文版本:

区块链官方网站特殊字体
中英文区块链官方网站特殊字体实现方法

大家应该比较清楚,不管你的系统里面有没有Arial这个字体,打开网站都默认会是英文的字体都是Arial字体,那么实现的方法是:

找到字体Arial进行下载后,字体是:TTF,如果要使用到网站里面去达到各浏览器的兼容,还需要对各字体进行格式的转换,这里我用的字体转换网站是:freefontconverter.com,上传转换成功后字体有:

网站特殊字体实现
在网站中实现网站特殊字体,系统没有自带的字体显示

得到我们所要的.eot、woff、svg所有字体格式了

下面使用方式是,先在css文件里面

@font-face {
font-family: "djsfont";
src: url('../fonts/arial.eot');
src: url('../fonts/arial.eot?#iefix') format('embedded-opentype'),
url('../fonts/arial.woff2') format('woff2'),
url('../fonts/arial.woff') format('woff'),
url('../fonts/arial.ttf') format('truetype'),
url('../fonts/arial.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}

这里的”djsfont“,是自字义名称,可自行取名。

然后在body的font-family:”djsfont”即可引用了哦

网站开发、微信|小程序、APP系统开发!

联系我们: 598100156