为啥 svg 图片的字体系列会发生变化?

Posted

技术标签:

【中文标题】为啥 svg 图片的字体系列会发生变化?【英文标题】:Why can the font family of the svg image change?为什么 svg 图片的字体系列会发生变化? 【发布时间】:2020-07-19 08:47:54 【问题描述】:

svg 文件的字体系列是font-family="HelveticaNeue-Bold, Helvetica Neue"。我在我的网站中输入了 svg 文件。然后我检查了我的chrome浏览器,结果是真的,字体-family是Helvetica

但是我的朋友尝试访问我的网站,图像的字体系列发生了变化。字体家族是times new roman

怎么会这样?如何设置它以便在任何地方访问时字体系列都不会改变

【问题讨论】:

可能您朋友的设备没有安装字体,如果是这种情况,请将字体文件放在您的服务器中或从 google 字体等来源中放置样式表 @blacksheep 虽然没有安装。它应该工作 @SuccessMan 为什么你认为它应该有效?如果设备上没有字体文件,渲染引擎如何知道如何绘制它? @blacksheep 你是什么意思设备没有安装字体?我已将字体文件放在我的服务器中并调用谷歌字体。但它不起作用 @RobertLongson 我的项目中有字体文件,我用css调用它。但都是一样的 【参考方案1】:

访问者必须可以通过浏览器使用该字体。 基本上,您需要将正确的字体文件放在服务器上并通过 CSS 包含它们。

如果您不这样做,您的电脑将获得最接近的字体来呈现默认设置的文本。在您的情况下,这是 Helvetica。你的朋友没有安装这个,所以他得到了默认的 Times。

How to add fonts to your site

或者: This will do the heavy lifting for you

根据您制作 SVG 的方式,您还可以将类型转换为形状,这样您就不需要字体,但无法轻松编辑文本。

【讨论】:

我已将字体文件放在我的服务器上并通过 css 包含在内。但它不起作用

以上是关于为啥 svg 图片的字体系列会发生变化?的主要内容,如果未能解决你的问题,请参考以下文章

为啥将PDF转化为word后字体和格式发生变化

为啥将PDF转化为word后字体和格式发生变化

vue为啥一打勾字体整体变色

自己写好的word文档如果放在别人的电脑上,格式、字体等都会发生变化,这是啥原因

为啥当我追加到其中的列表时,元组的内容会发生变化,但在更新变量时不会发生变化?

为啥啁啾频率的微小变化会导致快速傅里叶变换输出发生重大变化?