嵌入自定义字体
本文内容
通过在 Windows 应用商店应用程序中嵌入自定义字体,您可以从设计中的各种字体系列和样式中进行选择,同时确保您选择的任何字体可供应用程序的所有用户使用。 您可以使用您喜爱的搜索引擎查找和下载各种字体,并且只能在 Windows 应用商店应用程序中嵌入以下类型的字体:
重要的
与大多数类型的软件一样,字体文件是经过许可的,而不是转售的。 管理字体使用的许可证因供应商而异,但一般来说,大多数许可证(包括 Microsoft 随应用程序和 Windows 附带的字体的许可证)不允许将字体嵌入到应用程序中或以其他方式重新分发。 因此,作为开发人员,您有责任确保您拥有将字体嵌入到应用程序中或以其他方式重新分发的必要权限。
在本主题中,您将学习如何:
将字体文件添加到您的项目中
您可以通过以下方式将字体文件添加到您的项目中:
重要的
要从 Fonts 文件夹 (c:windowsfonts) 添加文件,您需要本地计算机上的管理权限。
您不必在项目中创建文件夹来嵌入字体文件,我们建议您这样做。
创建文件夹
添加字体文件
在 **Project 面板中选择字体文件夹后,打开 Project 菜单并单击 Add Existing Item**(鼠标:Ctrl+I)。
在“**添加现有项目”对话框中,单击要添加的字体文件,然后单击“打开”**。
暗示
您可以通过按住 Ctrl 键并单击每个文件来指定多个字体文件。
此时,您可以:
继续下一部分,创建针对您刚刚添加的字体的 **“@font-face”** 规则。
创建@font-face规则
要使自定义字体可用于您的应用程序,您必须创建 @font-face 规则。 您的@font-face 规则可以针对字体系列(例如,字体的常规、粗体和粗体版本)或字体(例如,仅针对字体的粗体版本)。 每种字体都在字体文件中实现。
Limelight 包含一个字体文件。 Quicksand 包括六个字体文件。 堆叠文件图标表示字体系列包含多种字体。
@font-face"title="混合@font-face"/>
例如,要执行此操作,如果要使用 Quicksand 常规字体,请创建 @font-face 规则并将其 font-family 属性设置为“Quicksand”:
复制
@font-face
{
font-family: Quicksand;
src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}
如果要对所有以斜体显示的文本使用 Quicksand 斜体,请创建一个附加 @font-face 规则css自定义字体,并将 font-family 属性设置为“Quicksand”并将 font-weight 属性设置为粗体:
复制
@font-face
{
font-family: Quicksand;
src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}
@font-face {
font-family: Quicksand;
src: url('/fonts/Quicksand-Bold.otf') format('opentype');
font-weight: bold;
}
在 Blend 中,您可以通过执行以下操作之一来创建或编辑 @font-face 规则:
这两个选项都会打开 @font-face 编辑器,您可以在其中定义 @font-face 规则的属性。
以下过程将演示如何为 Quicksand 斜体创建 @font-face 规则。
创建@font-face规则
评论
此过程是上一节“添加字体文件”过程的延续。
在“**将所选字体添加到 @font-face 规则”对话框中,确保选中“创建针对这些字体的新 @font-face 规则”复选框,然后单击“确定”**。
如果同时添加多个文件,@font-face编辑器将包含所有字体文件作为**“Font Family”**的源文件,但font-family名称与文件列表中的名称不同您添加的第一个文件是相同的。 此外,您应该针对特定的字体文件并设置该文件的属性。
在 **字体系列** 框中,键入 Quicksand。
在 **“src”列表中,通过单击每个源文件右侧的加号 (-) 删除源文件css自定义字体,直到仅保留“Quicksand-Bold.otf”**。
如果您不小心只移动了“Quicksand-Bold.otf”,您可以单击“添加源”图标,然后单击“opentype”,从而重新添加该文件。 在 opentype 列表中,单击 Quicksand-Bold.otf**。
在“**字体粗细”列表中,单击“粗体”,然后单击“确定”**。
@font-face 规则"title="混合添加 @font-face 规则"/>
要创建针对不同字体文件的其他 @font-face 规则,请在 **属性** 面板中右键单击要定位的字体文件,然后重复步骤 2 到 4。
暗示
创建 @font-face 规则后,它会添加到活动 .css 文件中的插入点之后。 “样式规则”面板中的红线表示插入点。
将自定义字体应用于选定的文本内容
现在您已将自定义字体添加到项目中并创建了 @font-face 规则,然后您可以从 ** 中“字体系列”下拉列表的“@font-face 字体”部分中选择它CSS 属性面板选择字体,然后应用该字体。
在以下过程中,Limelight 字体将添加到 PickaFlick 项目中,该项目来自使用 Blend 创建您的第一个 Windows 应用商店应用程序,第 1 部分:母版页的视频应用程序(HTML 和 JavaScript)。
应用自定义字体
选择要应用自定义字体的文本。
在 CSS 属性面板的字体类别中,单击字体系列列表中的新字体。
暗示
请注意,“@font-face 字体”列表现在包含您刚刚添加的字体。
您指定的文本将以@font-face 字体显示。