SVG字体知识库| aspose.font

SVG字体简介

要解释什么是SVG字体，首先让我们学习共同的SVG一词。从所谓的 aspose.svg产品中，我们了解到可扩展的向量图形(SVG)是一种用于创建二维矢量和混合向量/栅格图形图形的XML语言。 SVG文档是一个文本文件，将图像描述为几何原始词：线，曲线，形状，文本等。向量对象是构造和存储为一组命令，数字和公式的，而不是在像素网格中，如位图。

SVG字体是SVG图像中使用的一种字体，就像格式的任何其他对象一样，它可以缩放而不会丢失质量。您可以将字体直接嵌入图像中，从而易于使用自定义版式创建图形。

SVG字体是使用XML定义的字体，就像SVG图像一样。它是定义字体字符的形状，线条和曲线的集合。该字体也可以使用 CSS进行样式和操纵，因此您可以使用相同的技术在SVG映像中代码文本，与您对任何其他SVG元素进行编码。

SVG字体的优点和缺点

下表显示了SVG字体的优缺点，因此您可以决定是否在项目中使用它。

优点	缺点
可扩展性：SVG 字体可以缩放到任意大小而不会损失质量，因此非常适合用于任何响应式设计。	浏览器支持：大多数现代 Web 浏览器都支持 SVG 字体，但某些旧版浏览器可能不支持。
文件大小更小：与 Web 字体相比，SVG 字体的文件大小更小，这对于缩短加载时间至关重要。	编辑器支持有限：并非所有文本编辑器和设计软件都支持 SVG 字体。
更易访问：SVG 字体被认为更方便残障用户使用。它们可以被屏幕阅读器轻松读取，并允许包含替代文本描述。	复杂性：SVG 字体难以使用和编辑，因为它们需要更多技术知识。
高级排版：SVG 字体包含连字、字距调整、替代字符等高级排版功能。	可搜索性：SVG 字体可能会影响网站的 SEO，因为它们无法被搜索引擎搜索到。
样式和动画：在 CSS 和 JavaScript 中轻松设置 SVG 字体的样式或动画。	有限的字体选项：与 True Type 字体相比，SVG 格式可用的字体选项较少。
更好地支持非拉丁符号：由于其可扩展性，SVG 字体可用于绘制包含大量字符或需要复杂渲染的字体，例如象形文字、阿拉伯语或印地语字母。

SVG还是Woff？

SVG字体在SVG的早期很受欢迎，但是现在Web字体在大多数情况下都取代了它们，因为它们更灵活，并得到了所有现代浏览器的支持。无论如何，例如，您仍然可以在旧版本的Internet Explorer中找到SVG字体。因此，让我们比较这些字体。

Web开放字体格式或WOFF是一种通过Internet交付字体文件的格式，旨在满足Web应用程序市场的需求。与其他文件格式(例如TrueType和Opentype)相比，创建了Woff格式，以提供更有效的方式来传递Web字体。该格式压缩字体数据以减少文件大小以更快地下载和使用网页。它还包括提供有关字体的信息的元数据，例如字体系列，样式和版权信息。

SVG是一种矢量图形格式，用于在网络上创建和显示图像。这是一种基于文本的格式，可以轻松编辑和操纵，因此在创建徽标，图标和其他图形时，它是一个不错的选择。

因此，如果通过其目的比较这些格式，则要创建用于在网络上使用的图形，则应使用SVG。如果您需要在网站上使用字体，则应使用Woff。

两种格式都可以与CSS进行交互，但是使用CSS中的Font-FACE规则将WOFF文件嵌入在网页中。这使网络设计人员可以在其网站上使用自定义字体，而无需用户在设备上安装字体。无论用户使用什么浏览器，这都可以提供更好的灵活性和一致的视觉体验。

SVG还是TTF？

如果在 TTF或SVG之间进行选择，则首先需要阐明项目的要求，因为它们通常用于不同的情况。这些字体非常相似，因为它们都为您提供了高质量，可扩展且易于阅读的文本。

True Type字体格式是Web和打印设计最著名的字体格式，并得到大多数操作系统和设备的支持。 TTF也很容易使用和实现。这是一种矢量格式，但使用开发的指令工具，该工具允许字体具有与位图字体质量相似的指令，并被某些来源视为栅格。 SVG是向量字体格式。它将字体存储为一组路径，无损缩放到任何尺寸。它允许这样的字体为您提供较小的字体文件，如SVG中所述的woff比较。 SVG也是为残疾人提供更好的可读性，也是为残疾人提供服务的选择。

简而言之，TTF是最广泛支持的格式，在大多数情况下都是最好的，但是如果您需要扩展文本，想要使文本可访问或需要高级排版功能，则SVG是一个不错的选择。

在哪里使用SVG字体？

如果专注于：

**响应式设计：**像SVG这样的可扩展字体对此类问题有好处。
**可访问性：**如上所述，SVG字体可以提供更好的可读性。
高级排版： SVG字体中包含了连接，kerning和其他字符之类的功能。
样式和动画： SVG字体为设计和动画提供了更大的灵活性。
**非拉丁脚本脚本：**您可以使用SVG字体来表示具有大量复杂到渲染字符的字体。
打印设计： SVG在某些文件大小至关重要的某些打印设计项目中很有用，但是您需要同时使用高分辨率图像和复杂的版式。
**使用SVG图形：**作为常见的SVG字体是SVG图形映像的一部分，并使用XML语言表示，您可以手动或借助特殊的软编辑字体字形，并立即查看整个SVG图像中的结果(文本视图更改)。

重要的是要注意，SVG字体可能不是所有项目的最佳选择。最好还添加不同格式的字体作为后备选项。

SVG字体免费吗？

有许多开源字体库，并在开放源代码许可下具有多种免费的SVG字体，例如Google字体，开放字体库，等等。但是，并非所有SVG字体都可以免费使用。一些设计师出售许可证，许可条件可能会有所不同。某些字体可能具有免费版本，具有有限的功能和带有更多选项的付费版本。在项目中使用字体之前，请先检查字体的许可条款和使用条款。通过这样做，您将确保它可以免费使用或拥有所需的权限。

有四个选择字体许可的选择：

允许在其他系统上嵌入和临时加载字体。使用这样的许可，您可以编辑字体，包括新文本的格式，并保存任何更改。
允许以临时方式嵌入字体，使字体可以加载到其他系统上。使用此许可证，您可以使用嵌入式字体编辑和格式化新文本，并保存任何更改。
允许以永久方式嵌入字体，该字体允许远程系统或其他用户安装和使用该字体。
允许以临时方式嵌入字体，以查看或打印其他系统上的文档。

SVG字体文件

SVG字体使用XML语法，可以直接嵌入到SVG文档中或引用为外部文件。它的结构由下一个组成部分组成：

XML声明文件开头。它指定了XML的使用版本和编码信息。
字体元素。它包含有关字体名称，家庭，样式等字体的常见信息。
字形元素。它定义了字体的单个字符。每个 glyph都有一个唯一的标识符，一个Unicode编号以及组成字符的一组路径或形状。
字体面元素。它用于定义字体元数据( 指标)，例如其上升，下降，基线位置和字形边界框。
缺少字形元素。它定义了默认字形。如果在字体中找不到所需的字形，将使用该字形。- 定义字体文件源的Font-face-SRC之类的可选元素，以及为字体提供URI的字体face-uri。

这是SVG字体文件的基本结构的代码示例：

1 
2    <?xml version="1.0" encoding="UTF-8"?>
3    <svg xmlns="http://www.w3.org/2000/svg">
4      <font id="MyFont" horiz-adv-x="1000">
5        <font-face font-family="MyFont" units-per-em="1000" ascent="800" descent="200" />
6        <glyph glyph-name="Triangle" d="M0,0 L100,0 L50,100z" />
7        <glyph unicode="B" glyph-name="B" d="M50,50 L50,150 L100,150 L100,115 L85,100 L50,100 M85,100 L100,85 L100,50z" />
8      </font>
9    </svg>

让我们解释代码示例。

首先，我们看到通用的 XML 声明，它定义了 XML 的版本号和编码方式。自 2008 年以来，UTF-8 编码一直是万维网 (World Wide Web) 最常用的编码方式。

此 XML 中的主要元素（标签）是元素“svg”，它定义了一个 SVG 文档片段。 “svg”元素的属性“xmlns”引用了 SVG 1.0 规范中定义的 XML 命名空间。

字体本身的描述从 <font> 元素开始。该元素包含两个属性：

id 属性唯一地标识了字体，并在需要从外部 SVG 文件引用字体时使用。属性 horiz-adv-x 决定了在水平方向上渲染字形后的默认水平前进距离（有关更多信息，请参阅 glyph metrics。如果未指定此属性，则默认值为 1000。

在此示例中，元素“字体面”将字体的这种常见特征定义为：

字体家族 - 一组相关的，相似的旁设计字体。
每次EM的单元 - EM正方形上的坐标单元数量，即雕文的设计网格的大小。
上升，下降 - 分别从基线上的原点点到字形的最高/最低点的长度。

我们示例字体包含的每个字形都由“字形”元素表示。诸如“ Unicode”和“ Glyph -name”之类的参数分别使用字符代码或字形的名称来访问相应的字形。在实际的SVG字体数据中，仅提供单个属性，unicode或Glyph的名称来访问所需的字形。

属性d是“字形”元素的最重要属性。它使用线条和曲线等几何原语定义了字形的轮廓。

让我们看一下如何在我们的示例中获取名为“三角形”的字形的图形路径。相对于图形上下文的相应命令，此路径中的每个字母都是特殊的缩写。每个字母后面有2个数字，这些是坐标。该示例中的所有坐标都是全局，没有一个坐标是相对于上点的。

这条路中的第一个字母是“ M”。这是一个命令“ moveto”。从其名称开始时，此命令将笔设置为指定的坐标，在我们的情况下 - 坐标系的开始(0，0)。

下一个命令 - “ l”表示命令“ lineto”。此命令从当前点(0,0)到给定的(x，y)坐标，该命令将一条线绘制为新的当前点。

新当前点的坐标是“ L”命令的参数 - 在我们的情况下，这些是坐标(100，0)。

因此，我们的字形中的第一行是从点(0,0)到点(100，0)的线。下一个命令 - “ L50,100” - 从当前点(100，0)到点(50，100)绘制一条线。

并且我们的字形路径中的最后一个命令被命名为“ ClosePath”，并通过从当前点到当前子路径的初始点 - (0,0)来绘制直线来关闭当前子路径。

因此，从解释的示例中，我们简要了解了如何以SVG格式表示字形，如何访问这些字形以及字体应具有的最常见特征，以便正确显示此字体的文本。

如何创建SVG字体？

通常，SVG字体的创建过程具有下一个顺序：

为每个字体的每个字形创建向量图形。为此，您可以使用Illustrator，Inkscape或字形等软件。
将每个字形作为SVG文件导出，确保为每个字形使用相同的字体名称和属性。
使用Fontforge或Fontlab等软件创建字体文件。然后导入每个字符的SVG文件。
将元数据(例如字体名称，作者和许可证)添加到创建的文件中。
测试结果。将字体安装在计算机上，并在不同的文本编辑器和设计软件中尝试。请记住，并非所有此类程序都支持SVG字体，因此请确保您拥有适当的创建和编辑SVG字体的程序。

结论

SVG字体具有很高的知名度，并且比其他字体更好的解决方案。但是，要做出决定，如果这种格式是您项目的正确选择，则最好先了解其优点和缺点。

如果您想在线使用 SVG 而不加载任何其他软件，您可以使用 跨平台应用程序，如果您专注于使用字体，请转到另一组 使用字体的应用程序，在那里您可以找到 转换器 将您的 SVG 字体文件转换为更合适的格式、查看器和合并器。

真正的类型字体类型1字体