在Illustrator SVG文件中保留字体类型

24

嗨，我是插画家的新手，并创建了一个使用“ Skia-Regular”字体的图像。但是，当我以.svg格式保存该图像时，它会更改字体类型。当我在浏览器中打开.svg格式文件时，字体完全不同。谁能告诉我我在做什么错。我也用notepad ++打开了.svg文件，它说font-family =“'Skia-Regular'以及该字体不是Skia Regular。任何帮助将不胜感激。

图像也附有参考附图片

— 里兹万606
source

31

如果您想确保文本在每种情况下都具有相同的外观-

首先，您可以先展开文本，然后再另存为svg

其次，在保存对话框的字体部分中，您可以按“转换为轮廓”

— 宜兰
source

2

第二部分很清楚。您能否解释一下第一部分，我如何“扩展”文本？

— Rizwan606

5

@ Rizwan606，您可以使用选择工具选择文本，然后按菜单对象，然后按展开（它将文本转换为形状），或者选择文本，然后右键单击并选择创建轮廓

— Ilan

5

为了澄清这个答案，您无需同时执行这两项操作。两种方法都可以独立工作。

— 西蒙·伍德赛德

⚙️（导出文件类型的高级设置）→SVG→字体为“转换为轮廓”。

— КонстантинВан

9

字体不能正确呈现为实际字体类型的原因是因为使用Illustrator应用程序保存SVG时。该应用程序自动将设计转换为代码。如果仔细观察，代码中的字体名称与系统中安装的实际字体不匹配。

要解决字体渲染问题，您将需要从Illustrator复制SVG代码，并修改字体名称以匹配系统中安装的字体名称。（例如：来自Illustrator“ Arial-Regular”的SVG代码中的字体名称，但系统中安装的字体名称为“ Arial Regular”。在这里，您需要修改代码以将Font-Family设置为“ Arial Regular” “。）

这将解决您的问题，而无需将字体转换为轮廓。

希望这可以帮助！

— 沙美尔
source

1

就是这样！当执行“文件”>“保存”并选择“ SVG”时，Illustrator使用PostScript名称作为字体。您最终可能会以“ MyriadPro-Regular”而不是您期望的“ Myriad Pro”，并且您的浏览器无法像Illustrator一样使用PostScript名称。一种解决方法是使用“文件”>“导出”来保存SVG，因为它将导出正确的系列名称而不是PostScript名称。

— Michael Thompson

@Michael Thompson，当我选择“文件”>“导出”时，SVG并不是选项之一。我正在使用CS5。这是较早/更高版本中的选项吗？

— Max Starkenburg

@MaxStarkenburg：“导出”菜单在各个版本之间发生巨大变化。在较新的版本中，有三种保存/导出到SVG的方法：“文件”>“另存为”>（选择SVG类型）。文件>导出>导出为...>（选择SVG类型）和文件>导出到屏幕>（添加SVG格式）。

— Michael Thompson

4

如您所述，字体是对字体文件的引用，该字体文件可能会（或可能无法）提供给尝试打开svg的系统。解决方案是将类型转换为路径，以便将曲线显式存储在文件中。

至于为什么浏览器可能不知道您要引用的字体，目前尚不清楚，因为我假设您正在与创建svg文件时使用的同一台计算机上进行测试。可以在Illustrator中选择该字体，但不能在OS级别上正式安装该字体。

— 钟表
source

是的，我正在创建svg文件的同一台计算机上进行测试。如果我错了，请您指正我。我收到了答复的第一部分，因为我必须在Font-Family属性中提供Skia Regular的.ttf字体文件的特定路径？

— Rizwan606

取决于浏览器将字体名称与已安装的字体进行匹配，因此“否”将不会为它提供ttf的路径。该引用类似于css font-face语法，该语法允许以逗号分隔的字体系列样式列表。浏览器可能会不同地标识字体名称。

— horatio 2014年

请注意，对于具有这种性质的徽标和分布式内容（例如pdf等），最好嵌入字体或转换为路径。因此，解决此参考文献可能不是一个好的解决方案，因为您依赖

— 第三者

2

网络存档：

使用谷歌字体。
最多只能使用两个字体系列。

导出： 字体：（文本：svg，子组合：无）。svg属性：（样式元素）。

在结果文件的样式中，对其进行编辑：

附加行“ @import”。
将“ px”附加到所有字体大小。
重命名字体名称。

结果：

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
body {}

.st0{fill:#868686;}
.st1{font-family:'Roboto Condensed';}
.st2{font-size:14.414px;}
.st3{letter-spacing:55px;}
.st4{fill:#1D1D1B;}
.st5{font-family:'Roboto Condensed'; font-weight: 700;}
.st6{letter-spacing:51px;}
.st7{letter-spacing:45px;}
.st8{letter-spacing:40px;}

— 罗维森
source

1

这个答案太简洁了。我什至不知道它是否指向SVG文件或其他解决方案...

— jiggunjer

1

可能是您的PC在本地没有字体家族（Skia-Regular）字体文件。因此，当您在浏览器中打开SVG文件时，它会使用默认的系统字体进行渲染，该字体通常是Times New Roman。有几种解决方法：

使用@import引用Google Fonts API（但要注意的是，这取决于您如何在网站上嵌入SVG图像，只有在使用嵌入式SVG和对象标记SVG时，此方法才能很好地工作）
将字体转换为路径（这会增加文件大小，并且在丢失ClearType渲染时会导致文本模糊）
使用Nano 将字体嵌入到SVG文件中

您可以在此处阅读有关在SVG中使用自定义字体的更多信息：https : //css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/

— tary3um
source