css如何引用.ttf字体文件|@font-face

news/2024/11/20 13:42:35/

这里复习一下如何在css文件里引用.ttf字体文件。

如下图,红色圈起来的标题需要使用productsans字体,绿色圈起来的小标题需要使用roboto字体,字体文件已下载到fonts文件夹里,接下来,我们可以这样使用。

在css文件里使用

@font-face{

font-family: ProductSans(字体);

src: url('../fonts/ProductSans-Bold.ttf')

}

@font-face{

font-family:Roboto(字体);

src:url('../fonts/Roboto-Regular.ttf')

}

然后点击保存,刷新一下网页,就有效果了

以上就是css引入字体文件的用法及效果,有问题或更多方法请多多指教!


http://www.ppmy.cn/news/727990.html

相关文章

系统无法安装字体,复制到FONTS无效(出现提示:字体对系统无效)

问题: 从网上下载字体后可以复制到控制面板的字体中,但WORD、EXCEL、PHOTOSHOP等操作系统仍然无此字体。而且控制面板的字体打开后,“文件”项里没有“安装新的字体”一项。 解决方法(从网络上搜索,此方法很用): XP系统无法安装字体有两个原因&#xff1…

项目中的 fonts 文件夹中,怎么知道有什么图标呢?

项目中的 fonts 文件夹中,怎么知道里面有什么图标呢? 可以使用下面这个链接地址查看有什么图标: http://blog.luckly-mjw.cn/tool-show/iconfont-preview/index.html点击快速链接

ttf-dejavu fontconfig字体

ttf-dejavu fontconfig是验证码,pdf,excel时需要用到的字体 编辑dockerfile,先切换国内镜像源,默认alpinelinux是国外源,下载包会很慢 登录后复制 vim Dockerfile FROM alpine:latest RUN sed -i s/dl-cdn.alpineli…

排序算法汇总

https://blog.csdn.net/weixin_30342639/article/details/105343780 #include #include #include #include using namespace std; // https://blog.csdn.net/weixin_30342639/article/details/105343780 总览 1、选择排序- 不稳定! 2、冒泡排序-稳定 3、插入排…

findfont: Font family [‘Times New Roman‘] not found. Falling back to DejaVu Sans.字体安装

问题描述 使用python对数据进行可视化的时候,matplotlib绘图的时候,提示警告如题所示: UserWarning: findfont: Font family [Times New Roman] not found. Falling back to DejaVu Sans. 环境说明:使用的是 CentOS系统&#xf…

为什么在fonts文件夹菜单中没有“安装新字体”选项

其实,应该不只有「安装新字体」这个项目不见,开启旧文件、打印,以及在字体菜单上的「查看」里,隐藏字体变化、依相似性列出字体,这些都有可能会不见。 造成这种情形的原因可能有三种:   Fonts 数据夹的属…

QFontDatabase: Cannot find font directory .../lib/fonts

银河麒麟V10 SP1 2203, 飞腾CPU D2000/8. 安装完Qt 5.9.9之后,程序运行发现只有界面没有文字,提示 Cannot find font directory /home/yw/Qt5.9.9/lib/fonts. Note that Qt no longer ship fonts. 原因:字体缺失 解决方案&#…

findfont: Font family [‘Times New Roman‘] not found. Falling back to DejaVu Sans.

问题背景: 远程使用服务器绘图时,设置font_dict中字体格式为Times New Roman,如下: font_dictdict(fontsize16,colorblack,familyTimes New Roman,# weightlight,styleitalic,) 在绘图的过程中报出以下错误: fin…