README

The EncodeSansBundle 将 EncodeSans 字体家族加载到您的 symfony 项目中。

如果您的项目使用 AsseticBundle，则字体作为 assetic 命名资产 提供使用。

安装

按照以下方式更新项目的 composer.json 文件

{
	"repositories": [
		{
			"type": "composer",
			"url": "http://satis.united-asian.com/fonts"
		}
	],
	require: {
		"fonts/encode-sans": "dev-master"
	}
}

配置

通过配置定义包的 mode。默认值是 individual。

encode_sans:
	mode: families|individual

用法

families 模式

在 families 模式下，定义了 5 个 Encode Sans 字体家族，每个家族有 9 种不同的粗细。

每个字体家族都在单独的样式表中定义，并通过不同的 assetic 命名资产表示

• Encode Sans: encode-sans-all.css (@encode-sans)
• Encode Sans Condensed: condensed/encode-sans-condensed-all.css (@encode_sans_condensed)
• Encode Sans Compressed: compressed/encode-sans-compressed-all.css (@encode_sans_compressed)
• Encode Sans Narrow: narrow/encode-sans-narrow-all.css (@encode_sans_narrow)
• Encode Sans Wide: wide/encode-sans-wide-all.css (@encode_sans_wide)

使用以下三种方法之一在页面模板中包含相关的样式表。在此示例中，我们加载了 Encode Sans、Encode Sans Narrow 和 Encode Sans Wide 字体家族

直接包含

<link href="bundles/encodesans/css/encode-sans-all.css" rel="stylesheet" type="text/css">
<link href="bundles/encodesans/css/narrow/encode-sans-narrow-all.css" rel="stylesheet" type="text/css">
<link href="bundles/encodesans/css/wide/encode-sans-wide-all.css" rel="stylesheet" type="text/css">

使用 assetic 的 javascripts twig 标签

{% stylesheets filter="cssrewrite"
    "bundles/encodesans/css/encode-sans.css"
    "bundles/encodesans/css/encode-sans-narrow.css"
    "bundles/encodesans/css/encode-sans-wide.css"
%}
{% endstylesheets %}

使用 assetic 的 javascripts twig 标签与包的公式

{% stylesheets filter="cssrewrite"
    "@encode_sans"
    "@encode_sans_narrow"
    "@encode_sans_wide"
%}
{% endstylesheets %}

在您的样式表中，通过 font-* CSS 规则将字体应用于您选择的元素，如下例所示

body {
	font-family: "Encode Sans", sans-serif;
}

h1 {
	font-family: "Encode Sans Wide", sans-serif;
	font-weight: 600;
}

h3 {
	font-family: "Encode Sans Narrow", sans-serif;
}

individual 模式

在 individual 模式下，为每个小部件和粗细组合加载不同的字体。在大多数情况下，您的应用程序只会使用所有可用字体粗细子集的一部分。而不是加载所有字体，此模式允许您只加载所需的内容。这是包的默认模式。

字体宽度和字体粗细的每个组合代表不同的字体，并在单独的样式表中定义；每个都由不同的 assetic 命名资产表示。

• 正常宽度
  • Encode Sans: normal/encode-sans_regular.css (@encode_sans)
  • Encode Sans Medium: normal/encode-sans-medium.css (@encode_sans_medium)
  • Encode Sans SemiBold: normal/encode-sans-semibold.css (@encode_sans_semibold)
  • Encode Sans Bold: normal/encode-sans-bold.css (@encode_sans_bold)
  • Encode Sans ExtraBold: normal/encode-sans-extrabold.css (@encode_sans_extrabold)
  • Encode Sans Black: normal/encode-sans-black.css (@encode_sans_black)
  • Encode Sans Light: normal/encode-sans-light.css (@encode_sans_light)
  • Encode Sans ExtraLight: normal/encode-sans-extralight.css (@encode_sans_extralight)
  • Encode Sans Thin: normal/encode-sans-thin.css (@encode_sans_thin)
• Condensed
  • Encode Sans Condensed: condensed/encode-sans-condensed-regular.css (@encode_sans_condensed)
  • Encode Sans Condensed Medium: condensed/encode-sans-condensed-medium.css (@encode_sans_condensed_medium)
  • Encode Sans Condensed SemiBold: condensed/encode-sans-condensed-semibold.css (@encode_sans_condensed_semibold)
  • Encode Sans Condensed Bold: condensed/encode-sans-condensed-bold.css (@encode_sans_condensed_bold)
  • Encode Sans Condensed ExtraBold: condensed/encode-sans-condensed-extrabold.css (@encode_sans_condensed_extrabold)
  • Encode Sans Condensed Black: condensed/encode-sans-condensed-black.css (@encode_sans_condensed_black)
  • Encode Sans Condensed Light: condensed/encode-sans-condensed-light.css (@encode_sans_condensed_light)
  • Encode Sans Condensed 超细：condensed/encode-sans-condensed-extralight.css (@encode_sans_condensed-extralight)
  • Encode Sans Condensed 薄：condensed/encode-sans-condensed-thin.css (@encode_sans_condensed_thin)
• 压缩
  • Encode Sans 压缩：compressed/encode-sans-compressed-regular.css (@encode_sans_compresssed)
  • Encode Sans 压缩 中等：compressed/encode-sans-compressed-medium.css (@encode_sans_compresssed_medium)
  • Encode Sans 压缩 半粗体：compressed/encode-sans-compressed-semibold.css (@encode_sans_compresssed_semibold)
  • Encode Sans 压缩 粗体：compressed/encode-sans-compressed-bold.css (@encode_sans_compresssed_bold)
  • Encode Sans 压缩 超粗体：compressed/encode-sans-compressed-extrabold.css (@encode_sans_compresssed_extrabold)
  • Encode Sans 压缩 深色：compressed/encode-sans-compressed-black.css (@encode_sans_compresssed_black)
  • Encode Sans 压缩 亮色：compressed/encode-sans-compressed-light.css (@encode_sans_compresssed_light)
  • Encode Sans 压缩 超亮色：compressed/encode-sans-compressed-extralight.css (@encode_sans_compresssed_extralight)
  • Encode Sans 压缩 薄：compressed/encode-sans-compressed-thin.css (@encode_sans_compresssed_thin)
• 窄
  • Encode Sans 窄：narrow/encode-sans-narrow-regular.css (@encode_sans_narrow)
  • Encode Sans 窄 中等：narrow/encode-sans-narrow-medium.css (@encode_sans_narrow_medium)
  • Encode Sans 窄 半粗体：narrow/encode-sans-narrow-semibold.css (@encode_sans_narrow_semibold)
  • Encode Sans 窄 粗体：narrow/encode-sans-narrow-bold.css (@encode_sans_narrow_bold)
  • Encode Sans 窄 超粗体：narrow/encode-sans-narrow-extrabold.css (@encode_sans_narrow_extrabold)
  • Encode Sans 窄 深色：narrow/encode-sans-narrow-black.css (@encode_sans_narrow_black)
  • Encode Sans 窄 亮色：narrow/encode-sans-narrow-light.css (@encode_sans_narrow_light)
  • Encode Sans 窄 超亮色：narrow/encode-sans-narrow-extralight.css (@encode_sans_narrow_extralight)
  • Encode Sans 窄 薄：narrow/encode-sans-narrow-thin.css (@encode_sans_narrow_thin)
• 宽
  • Encode Sans 宽：wide/encode-sans-wide-regular.css (@encode_sans_wide)
  • Encode Sans 宽 中等：wide/encode-sans-wide-medium.css (@encode_sans_wide_medium)
  • Encode Sans 宽 半粗体：wide/encode-sans-wide-semibold.css (@encode_sans_wide_semibold)
  • Encode Sans 宽 粗体：wide/encode-sans-wide-bold.css (@encode_sans_wide_bold)
  • Encode Sans 宽 超粗体：wide/encode-sans-wide-extrabold.css (@encode_sans_wide_extrabold)
  • Encode Sans 宽 深色：wide/encode-sans-wide-black.css (@encode_sans_wide_black)
  • Encode Sans 宽 亮色：wide/encode-sans-wide-light.css (@encode_sans_wide_light)
  • Encode Sans 宽 超亮色：wide/encode-sans-wide-extralight.css (@encode_sans_wide_extralight)
  • Encode Sans 宽 薄：wide/encode-sans-wide-thin.css (@encode_sans_wide_thin)

按照以下示例将相关样式表包含到您的模板中。在此情况下，我们加载了 Encode Sans、Encode Sans Bold 和 Encode Sans Wide Black 字体。

直接包含

<link href="bundles/encodesans/css/encode-sans.css" rel="stylesheet" type="text/css">
<link href="bundles/encodesans/css/encode-sans-bold.css" rel="stylesheet" type="text/css">
<link href="bundles/encodesans/css/wide/encode-sans-wide-black.css" rel="stylesheet" type="text/css">

使用 assetic 的 javascripts twig 标签

{% stylesheets filter="cssrewrite"
    "bundles/encodesans/css/encode-sans.css"
    "bundles/encodesans/css/encode-sans-bold.css"
    "bundles/encodesans/css/wide/encode-sans-wide-black.css"
%}
{% endstylesheets %}

使用 assetic 的 javascripts twig 标签与包的公式

{% stylesheets filter="cssrewrite"
    "@encode_sans"
    "@encode_sans_bold"
    "@encode_sans_wide_black"
%}
{% endstylesheets %}

在您的样式表中，通过 font-* CSS 规则将字体应用到您选择的元素，如下例所示。请确保使用每个重量的适当字体名称。无需指定 font-weight，因为它已经包含在字体定义中。

body {
	font-family: "Encode Sans", sans-serif;
}

.jumbotron h1 {
	font-family: "Encode Sans Wide Black", sans-serif;
}

strong {
	font-family: "Encode Sans Bold", sans-serif;
}