css之字体的引用

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。

多个字体系列是用一个逗号分隔指明:

实例

p{font-family:"Times New Roman", Times, serif;}

如何在css中引入外部字体

css引入外部字体包的方法

@font-face{
            font-family: 'oswald';
            src : url('..//fonts/oswald.regular.ttf');
        }

引入这个字体

.fontFail {
            font-family: oswald;
        }

数字使用oswald字体,中文使用思源

复制代码
body{
    font-family: "oswald", "SourceHanSansSC-Light","Source-Han-Light","Source Han Sans CN","SourceHanSansCN-Light","webfontSourceHanSansSC" !important
}

/ oswald字体只有数字和英文,所以汉字就默认使用下面的字体(思源字体)

/ "SourceHanSansSC-Light","Source-Han-Light","Source Han Sans CN","SourceHanSansCN-Light" 
/ 这个是思源字体的不同写法,为了兼容不同浏览器可以识别该字体

/ "webfontSourceHanSansSC" 这个就比较厉害了。  是上面字体包的引用。
如果前面的字体就没找到,就下载这个字体使用。
复制代码
字体也可以引用不同的文字格式
复制代码
@font-face {
  font-family: "SourceHanSansCN-Light";
  src: url("../font/SourceHanSansCN-Light.otf"),
    url("../font/SourceHanSansCN-Light.ttf");
  font-family: "SourceHanSansCN-Normal";
  src: url("../font/SourceHanSansCN-Normal.otf");
  font-family: "SourceHanSansCN-Regular";
  src: url("../font/SourceHanSansCN-Regular.otf");
}
复制代码

 




posted @   心向阳  阅读(23081)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示