分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

@font-face处理网页中特殊字体

发布时间:2023-09-06 02:00责任编辑:胡小海关键词:暂无标签

对一名前端而言,颜值即正义,前段时间公司官方网站被警告侵权使用微软字体(捂脸),收到指示立即将整个网站的字体改成思源黑体,虽然丑了点,但免费啊,连忙改起来。但是有个问题就是即使本地安装思源黑体的字体,网页是要上传到服务器的,用户访问网站,他们的电脑可不一定有思源黑体这种字体,除非在客户端安装这种字体,不然用户电脑是无法显示这种字体的。

①首先在自己本机上找到思源黑体的字体文件,如果没有可以在网上下载;

②百度font-face生成器,依照上面步骤,上传思源黑体文件,将生成的多种格式的思源黑体文件保存至本地,新建文件夹fonts,保存;

③将fonts文件放在自己上传的网站文件中,新建fonts.css文件,使用@font-face属性进行自定义字体的设置,我们就能够在网络中自由的使用自定义字体,举个栗子~

 1 @font-face { ?????2 ????font-family: "gufeibai"; // 这里是我们自己给字体命名 3 ?????src: url("SourceHanSans-Regular.woff2") format("woff2"), 4 ????????url("SourceHanSans-Regular.woff") format("woff"), 5 ????????url("SourceHanSans-Regular.ttf") format("truetype"), 6 ????????url("SourceHanSans-Regular.eot") format("embedded-opentype"), 7 ????????url("SourceHanSans-Regular.svg") format("svg"), 8 ????????url("SourceHanSans-Regular.otf") format("opentype"); 9 ??????font-weight: normal;10 ??????font-style: normal;11 ?}12 body {13 ????font: 15px/1.5 "gufeibai",Arial,sans-serif;14 ????color: #666;15 ????background: #fff;16 }

@font-face处理网页中特殊字体

原文地址:https://www.cnblogs.com/gufeibai/p/9212646.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved