在 CSS 中, 可以通过 @font-face 规则来指定一个用于显示文本的自定义字体.@font-face 规则允许网页开发者为其网页指定自定义的字体, 通过这种自定义字体的方式, 可以消除对用户电脑字体的依赖.
前提条件: 必须要先有字体文件, 比如 .ttf 文件, 叫 UI 给或者 百度自己下载.
1, 使用 @font-face 引入字体文件, 并且定义该字体的名称为: myFirstFont(自己随便写)
- <style>
- @font-face{
- font-family: myFirstFont;
- src: url('你自己的字体文件路径. ttf')
- }
- </style>
2, 通过 font-family 属性来指定元素的字体系列为用户自定义的
- <body>
- <div > 这是默认字体 </div>
- <div class="my_font"> 这是自定义字体 </div>
- <div class="my_font"> 一二三四五六七八九十 </div>
- <div class="my_font"> 哈哈哈哈 </div>
- </body>
- <style>
- @font-face{
- font-family: myFirstFont;
- src: url('你自己的字体文件路径. ttf')
- }
- .box{ font-family:myFirstFont; }
- </style>
说明:@font-face 规则
@font-face 规则指定一个用于显示文本的自定义字体; 字体能从远程服务器或者用户本地安装的字体加载.
@font-face 规则允许网页开发者为其网页指定自定义的字体, 通过这种自定义字体的方式, 可以消除对用户电脑字体的依赖.
通过允许作者提供他们自己的字体,@font-face 让设计内容成为了一种可能, 同时并不会被所谓的 "网络 - 安全" 字体所限制 (字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体, 同时在不依赖网络情况下实现此功能.
字体的名称, font - face 规则:
font-family: myFirstFont;
字体文件包含在您的服务器上的某个地方, 参考 CSS:
src: url('Sansation_Light.ttf')
如果字体文件是在不同的位置, 请使用完整的 URL:
src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')
语法:
- @font-face
- {
- font-family: myFirstFont;
- src: url('Sansation_Light.ttf'),
- url('Sansation_Light.eot'); /* IE9 */
- }
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/16869.html