CSS引入外部字体方法,附可用demo
2024-08-28 03:55:43
有时候我们做的页面需要用到一些更好看的字体
又不想用图片代替,图片会影响加载速度
则使用外部字体来显示
但是直接通过font-family又不一定全部都行
这就需要我们在css中进行定义并且引入字体文件路径
然后再使用外部字体
直接上代码:
font.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS引用外部字体</title>
<link rel="stylesheet" type="text/css" href="font.css">
</head>
<body>
<h1>里客云资源站</h1>
<h2>www.likeyunba.com</h2>
</body>
</html>
font.css
@font-face {
font-family: 'fontnameRegular';
src: url('fontname.eot');
src: local('fontname Regular'),
local('fontname'),
url('fontname.woff') format('woff'),
url('fontname.ttf') format('truetype'),
url('fontname.svg#fontname') format('svg');
}
/*其中fontName替换为你的字体名称*/
h1{font-family: fontnameRegular}
字体文件下载:
https://pan.lanzou.com/i0jon3e
其中上面的font.css
fontname代表字体文件名的名称
例如你的字体文件是heiti.ttf
那么上面的
fontname全都要改为heiti
OK,引入之后的效果
看得出来是已经发生改变了!
里客云资源站
http://www.likeyunba.com
技术交流群请加微信:likeyunba520
最新文章
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
- 【bzoj3991】 寻宝游戏
- iOS-消息推送机制的实现
- ECSHOP二次开发指南
- mvc中使用knockoutjs和ajax
- define预处理以及宏定义
- TinyXml和tinyxml2
- normalization归一化
- 使用 InstallShield limited edition 打包部署Outlook 2013 Office add-in插件
- Babel6.x 转换ES6
- RHCE6.4 rpm 安装gcc
- ssh远程登陆脚本(带跳板机)
- python中的集合
- Java窗体简单登入案例(附带源码)
- linux基础命令一
- ubuntu-docker入门到放弃(七)Dockerfile简介
- 【Elasticsearch学习之三】Elasticsearch 搜索引擎案例
- Weblogic服务端请求伪造漏洞(SSRF)和反射型跨站请求伪造漏洞(CSS)修复教程
- block,inline-block,行内元素区别及浮动
- Jenkins进阶-Git多仓库代码下载编译 (13)
热门文章
- Linux下kafka集群搭建过程记录
- PYTHON 100days学习笔记007-1:python数据类型补充(1)
- [AcWing30]正则表达式匹配
- [转帖]PostgreSQL的用户、角色和权限管理
- SQL Pretty Printer for SSMS 很棒的格式化插件
- The import javax.websocket cannot be resolved的解决问题
- Python特色数据类型--元组
- JavaScript - 过滤敏感字符
- Censoring(栈+KMP)
- 并不对劲的复健训练-bzoj5301:loj2534:p4462 [CQOI2018]异或序列