Web页面引入思源黑体

1.下载思源黑体
链接：https://pan.baidu.com/s/13M6bCCW2z4_YxvVy-Pn_Vg
提取码：zx17

/**
2.将下面代码引入css文件中
**/
@font-face {font-family: "sourcehansans"; /* 这个名字可以自己定义 */src: url("./fonts/sourcehansans.eot"); /* IE9 Compat Modes */ /*这里以及下面的src后面的地址填的都是自己本地的相对地址*/src: url("./fonts/sourcehansans.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */ url("./fonts/sourcehansans.woff") format("woff"),/* Modern Browsers */ url("./fonts/sourcehansans.ttf") format("truetype"),/* Safari, Android, iOS */ url("./fonts/sourcehansans.svg#YourWebFontName")format("svg"); /* Legacy iOS */font-weight: bold;font-style: normal;
}

用法

/** index.css **/
@font-face {font-family: "sourcehansans"; /* 这个名字可以自己定义 */src: url("./fonts/sourcehansans.eot"); /* IE9 Compat Modes */ /*这里以及下面的src后面的地址填的都是自己本地的相对地址*/src: url("./fonts/sourcehansans.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */ url("./fonts/sourcehansans.woff") format("woff"),/* Modern Browsers */ url("./fonts/sourcehansans.ttf") format("truetype"),/* Safari, Android, iOS */ url("./fonts/sourcehansans.svg#YourWebFontName")format("svg"); /* Legacy iOS */font-weight: bold;font-style: normal;
}
/** div样式 **/
.font {font-family: "sourcehansans";
}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 引入样式 --><link rel="stylesheet" href="index.css" /></head><body><div class="font">思源黑体</div><div>正常字体</div></body>
</html>

效果如下：

最近在做公司的宣传页，要求的字体是思源黑体，由于字体库太大了，加载速度慢，被领导要求优化。从网上找到一个可以压缩剔除不常用字体软件fontmin

压缩后的文件直接替换之前的字体文件就可以了，很适合宣传页、推广页之类的

Web页面引入思源黑体相关推荐

iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
一个Web页面的问题分析
一个Web页面的问题分析几个月之前我接到一个新的开发任务,要在一个旧的Web页面上面增添一些新的功能.在开发的过程中发现旧的代码中有很多常见的不合适的写法,结合这些问题,如何写出更好的,更规范的,更 ...
Spring Boot 2.x基础教程：使用 Thymeleaf开发Web页面
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 翟永超来源 | http://blog.di ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
移动端也能兼容的web页面制作2：导航栏、背景图片设置
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...
SiteMesh：一个优于Apache Tiles的Web页面布局、装饰框架
一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration) 的框架组件,能够帮助网站开发人员较 ...
php 离线 gis,在 Web 页面中使用离线地图
1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. 操作: 1. 参考:java离线地图web GIS制作下载好所需地图瓦片,本文以百度地图/深圳为例 2 ...
Web页面适配移动端方案研究
源宝导读:由于我们ERP目前大都是在在PC上面运行,大家现在关注移动端比较少,谈到移动端适配时,可能都有些生疏也可能比较好奇.以前做过一些移动端的little项目,那么借助这次分享的机会,和大家一起讨 ...
活动 Web 页面人机识别验证的探索与实践
在电商行业,线上的营销活动特别多.在移动互联网时代,一般为了活动的快速上线和内容的即时更新,大部分的业务场景仍然通过 Web 页面来承载.但由于 Web 页面天生"环境透明",相较 ...
Druid 配置及内置监控，Web页面查看监控内容【我改】
转: Druid 配置及内置监控,Web页面查看监控内容 1.配置Druid的内置监控首先在Maven项目的pom.xml中引入包 1 2 3 4 5 <dependency> ...

Web页面引入思源黑体

Web页面引入思源黑体相关推荐

最新文章

热门文章