无需下载.ttf文件,如何获取指定链接字体的font-family值用于网站配置
对应字体的font-family属性值
你查询的这款字体标准font-family取值为"Futura Bk BT",部分版本也支持"Futura BT Book"作为属性值,由于名称包含空格,使用时必须包裹英文双引号,避免浏览器识别异常。
无需本地存储字体的配置方法
你不需要把字体文件下载到自有服务器,可以通过@font-face规则引入第三方公共CDN托管的该字体资源,完整配置代码如下:
/* 引入外部托管的Futura Bk BT字体资源 */ @font-face { font-family: "Futura Bk BT"; src: url("第三方CDN提供的该字体.ttf资源地址") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* 替换原有body字体配置 */ body { font-family: "Futura Bk BT", system-ui, sans-serif; }
补充:配置
font-display: swap可以在字体加载完成前先使用系统兜底字体展示,避免页面出现文字空白问题;末尾添加的system-ui、sans-serif是兜底字体栈,保证特殊情况下字体加载失败时页面展示效果不会错乱。
内容的提问来源于stack exchange,提问作者incognitorecon
相关产品推荐
相关产品推荐

