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

Posted 2023-03-06

【中文标题】为啥 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 包含在内。但它不起作用