html css调用自定义字体,css怎么自定义字体样式？

在CSS中，可以通过@font-face规则来指定一个用于显示文本的自定义字体。@font-face规则允许网页开发者为其网页指定自定义的字体， 通过这种自定义字体的方式，可以消除对用户电脑字体的依赖。

css怎么自定义字体样式？

前提条件：必须要先有字体文件，比如 .ttf文件，叫 UI 给或者 百度自己下载。

1、使用@font-face引入字体文件，并且定义该字体的名称为：myFirstFont(自己随便写)

@font-face{

font-family: myFirstFont;

src: url('你自己的字体文件路径.ttf')

}

2、通过font-family属性来指定元素的字体系列为用户自定义的

这是默认字体

这是自定义字体

一二三四五六七八九十

哈哈哈哈

@font-face{

font-family: myFirstFont;

src: url('你自己的字体文件路径.ttf')

}

.box{ font-family:myFirstFont; }

说明：@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前端开发知识，请查阅 HTML中文网 ！！