README

SinkinSansBundle将SinkinSans字体族加载到您的symfony项目中。

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

安装

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

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

配置

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

sinkin_sans:
	mode: single|individual

使用

single模式

在single模式下，定义了一个单重的Sinkin Sans字体，有9种不同的粗细。

使用以下三种方法之一在页面模板中包含sinkin-sans.css样式表

直接包含

<link href="bundles/sinkinsans/css/sinkin-sans.css" rel="stylesheet" type="text/css">

使用assetic的javascripts twig标签

{% stylesheets filter="cssrewrite"
    "bundles/sinkinsans/css/sinkin-sans.css"
%}
{% endstylesheets %}

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

{% stylesheets filter="cssrewrite"
    "@sinkin_sans"
%}
{% endstylesheets %}

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

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

h1 {
	font-weight: 600;
}

.italic {
	font-style: italic;
}

individual模式

在individual模式下，为每个粗细分别加载单独的字体。在大多数情况下，您的应用程序只会使用所有可用字体的粗细子集。而不是加载所有字体，此模式允许您只加载所需的字体。这是捆绑包的默认模式。

每个字体的粗细定义在一个单独的样式表中，并由不同的assetic命名资产表示

• Sinkin Sans Thin: sinkin-sans-100.css (@sinkin_sans_100)
• Sinkin Sans ExtraLight: sinkin-sans-200.css (@sinkin_sans_200)
• Sinkin Sans Light: sinkin-sans-300.css (@sinkin_sans_300)
• Sinkin Sans: sinkin-sans-400.css (@sinkin_sans_400)
• Sinkin Sans Medium: sinkin-sans-500.css (@sinkin_sans_500)
• Sinkin Sans SemiBold: sinkin-sans-600.css (@sinkin_san_6100)
• Sinkin Sans Bold: sinkin-sans-700.css (@sinkin_sans_700)
• Sinkin Sans Black: sinkin-sans-800.css (@sinkin_sans_800)
• Sinkin Sans ExtraBlack: sinkin-sans-900.css (@sinkin_sans_900)

注意，在此模式下，每个粗细都是一个具有不同名称的单独字体。

每个字体的粗细都包括正常和斜体样式。

按照以下示例将相关的样式表包含到模板中。在这种情况下，我们正在加载Sinkin Sans、Sinkin Sans ExtraLight和Sinkin Sans Bold字体（分别为粗细400、200和700）。

直接包含

<link href="bundles/sinkinsans/css/sinkin-sans-400.css" rel="stylesheet" type="text/css">
<link href="bundles/sinkinsans/css/sinkin-sans-200.css" rel="stylesheet" type="text/css">
<link href="bundles/sinkinsans/css/sinkin-sans-700.css" rel="stylesheet" type="text/css">

使用assetic的javascripts twig标签

{% stylesheets filter="cssrewrite"
    "bundles/sinkinsans/css/sinkin-sans-400.css"
    "bundles/sinkinsans/css/sinkin-sans-200.css"
    "bundles/sinkinsans/css/sinkin-sans-700.css"
%}
{% endstylesheets %}

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

{% stylesheets filter="cssrewrite"
    "@sinkin_sans_400"
    "@sinkin_sans_200"
    "@sinkin_sans_700"
%}
{% endstylesheets %}

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

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

h1 {
	font-family: "Sinkin Sans Bold", sans-serif;
}

.italic {
	font-family: "Sinkin Sans ExtraLight", sans-serif;
	font-style: italic;
}