这段CSS代码定义了一个名为"Guardian Headline Full"的自定义字体家族，包含多种样式和字重。它涵盖了细体、常规体、中等体和半粗体版本，每种都提供正常和斜体样式。字体文件托管在线上，并以三种格式提供：WOFF2、WOFF和TrueType（TTF）。
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
}
对于交互式内容列，会添加具有特定定位和z-index的左边框。在较大屏幕上，边框的左侧位置会微调。在这些列内，原子元素没有上下边距，但包含内边距。当段落位于原子元素之前时，会移除内边距并改为添加边距。内联元素的最大宽度限制为620像素。
对于具有循环角色的图形，标题设置为更高的z-index，循环按钮具有特定的尺寸和对齐样式。自托管视频元素设置为全宽，上限为620像素，并包含上下边距。对于沉浸式视频布局，宽度限制被移除，边距被调整。在更宽的屏幕上，沉浸式视频宽度扩展并左移。
颜色变量定义了日期行、边框、标题和特色元素的样式。在深色模式下，文本和图标颜色适应深色主题。内容列内的原子元素没有内边距。特定规则确保某些元素或水平线之后的第一段在不同内容部分（如文章、评论和专题）中样式适当。登录门或水平线（最后一个除外）之后的第一段具有14像素的上内边距。
对于各种内容主体中初始元素、登录门或水平线（最后一个除外）之后第一段的首字母，应用特定的首字下沉样式。这使用Guardian标题字体，粗体，大小为111像素，行高92像素。它向左浮动，大写，使用border-box盒模型，有8像素的右边距，顶部对齐，并使用自定义颜色变量。
这些内容主体中水平线之后的段落没有上内边距。
这些内容主体中的引用块最大宽度为620像素。
主内容和文章容器中展示元素的标题静态定位，占据最大620像素的全宽。
沉浸式元素横跨整个视口宽度，考虑滚动条。在较大屏幕上（最多71.24em），它们限制为978像素，标题内边距在不同断点处调整。在中等屏幕上（46.25em至61.24em），最大宽度为738像素。在较小屏幕上（低于46.24em），它们左对齐，边距和标题内边距调整。
对于大屏幕（61.25em及以上）的家具包装器，使用网格布局，为标题组件定义列和行。CSS样式定义了网页标题部分（称为“家具包装器”）的布局和外观。它设置了边框、间距、排版和网格结构，这些结构在不同屏幕尺寸下调整。
对于较大屏幕（超过71.25em），建立复杂的网格布局，为标题、头条、元信息、导语（副标题）和肖像等元素指定列和行。视觉元素如边框和线条在特定断点处调整或移除。头条字体大小增加，其最大宽度在较大屏幕上变化。导语内的链接样式为带下划线，悬停时颜色变化。对于宽度超过740像素的屏幕，隐藏具有类`.keyline-4`或属性`[data-gu-name="lines"]`的元素。在`.furniture-wrapper`内，将这些元素内的SVG描边样式设置为使用`--headerBorder`颜色变量。
在宽度超过740像素的屏幕上，从`.furniture-wrapper`内具有ID`#meta`或属性`[data-gu-name="meta"]`的元素中移除右边距。对于这些元元素，将社交链接、评论部分及其子跨度的边框颜色设置为`--headerBorder`。同时，隐藏`.content__meta-container_dcr`内的任何`gu-island`组件。
对于导语部分（通过类、ID或`data-gu-name`选择），应用负左内边距和匹配的内边距，并将其位置设置为相对。在较宽屏幕上（超过740px），添加小的上内边距。将导语内的段落样式设置为字重400，大小20像素，下内边距14像素。
主媒体区域（通过ID或`data-gu-name`选择）相对定位，无上边距，小下边距，并放置在“肖像”网格区域。确保其内部div占据全宽且无水平边距。在非常宽的屏幕上（超过980px），移除下边距。在较小屏幕上（低于740px），将其宽度设置为视口宽度减去滚动条，并应用负左内边距。对于480px至740px之间的屏幕，将此负左内边距增加到-20px。
将图形标题样式设置为绝对定位在底部，具有特定的内边距和来自CSS变量的背景/文本颜色。将其宽度设置为100%，无最大宽度，移除下边距，并设置最小高度。使用`--headerBorder`为标题内的跨度着色，并用相同颜色填充其SVG。隐藏第一个跨度，并将第二个跨度显示为块元素，限制其宽度为90%。在宽度超过480px的屏幕上，增加标题的水平内边距。标题上的`.hidden`类将其不透明度设置为0。
标题按钮显示为块，绝对定位在右下角附近，具有高z-index。它具有圆形背景，无边框，和特定的内边距。将其SVG图标略微缩小。在宽度超过480px的屏幕上，调整其右侧位置。对于非常宽的屏幕（超过1140px），调整`.content__main-column--interactive`伪元素的上方和高度。同时，将此列内h2标题的最大宽度限制为620像素。
对于当body具有`.ios`或`.android`类时的根元素，定义一组深色模式颜色变量。在深色配色方案偏好中，相应更新`--new-pillar-colour`变量。
在iOS设备上，针对各种文章容器中特定初始元素之后的第一段，并样式化其首字母。如果登录门元素出现在该第一个元素和段落之间，这也适用。登录门之后的第一段的首字母，或元素原子后跟登录门之后的第一段的首字母，应使用次要支柱变量着色。这适用于iOS和Android上的专题、标准和评论文章容器。
在iOS和Android上，专题、标准和评论文章容器的文章标题高度应设置为零。
这些容器中的家具包装器应具有4像素的上内边距和10像素的水平内边距。其中的内容标签应使用粗体衬线字体家族，用新支柱变量着色，并具有大写文本。
家具包装器内的标题应为32像素大小，粗体，下内边距12像素，并使用颜色#121212。
家具包装器内的图像元素应相对定位，上边距14像素，左边距-10像素，宽度计算为视口宽度减去滚动条宽度，高度自动。这适用于iOS上专题文章容器内的内部图形、图像和链接元素。对于iOS和Android设备，文章容器内的图像设置为透明背景，宽度等于全视口宽度减去滚动条宽度，高度自动。
这些容器中的导语部分具有4像素的上内边距，24像素的下内边距，和-10像素的右边距。
导语内的段落使用Guardian Headline字体家族。
导语内的链接样式为特定颜色，下划线距离文本6像素，装饰线颜色，无边框。对于Android设备，当悬停在评论文章的导语部分的链接上时，下划线颜色应与新支柱颜色匹配。
对于iOS和Android设备，跨专题、标准和评论文章，元部分应无边距。在此元部分内，署名行、作者姓名和相关链接都应显示为新支柱颜色。
此外，元杂项部分应无内边距，其中的任何SVG图标应使用新支柱颜色作为描边。
对于iOS和Android上的专题、标准和评论文章中的展示元素，标题按钮应显示为flex容器。它应居中，内边距5px，尺寸28px x 28px，内容右对齐。在iOS和Android设备上，专题、标准和评论部分的文章主体无侧边内边距。对于这些文章内的非缩略图、非沉浸式图像，图形无边距，宽度根据视口减去内边距和滚动条宽度计算，高度自动。它们的标题无内边距。沉浸式图像横跨全视口宽度，考虑滚动条。使用“quoted”类样式化的引用块使用特定颜色作为装饰元素。文章主体内的链接根据主主题着色，具有设定偏移和颜色的下划线，无背景图像。悬停时，下划线颜色变为不同的主题颜色。
@media (prefers-color-scheme: dark) {
body.ios #feature-article-container .furniture-wrapper,
body.ios #standard-article-container .furniture-wrapper,
body.ios #comment-article-container .furniture-wrapper,
body.android #feature-article-container .furniture-wrapper,
body.android #standard-article-container .furniture-wrapper,
body.android #comment-article-container .furniture-wrapper {
background-color: #1a1a1a;
}
body.ios #feature-article-container .furniture-wrapper .content__labels,
body.ios #standard-article-container .furniture-wrapper .content__labels,
body.ios #comment-article-container .furniture-wrapper .content__labels,
body.android #feature-article-container .furniture-wrapper .content__labels,
body.android #standard-article-container .furniture-wrapper .content__labels,
body.android #comment-article-container .furniture-wrapper .content__labels {
color: var(--new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper h1.headline,
body.ios #standard-article-container .furniture-wrapper h1.headline,
body.ios #comment-article-container .furniture-wrapper h1.headline,
body.android #feature-article-container .furniture-wrapper h1.headline,
body.android #standard-article-container .furniture-wrapper h1.headline,
body.android #comment-article-container .furniture-wrapper h1.headline {
background-color: unset;
color: var(--headerBorder) !important;
}
body.ios #feature-article-container .furniture-wrapper .standfirst p,
body.ios #standard-article-container .furniture-wrapper .standfirst p,
body.ios #comment-article-container .furniture-wrapper .standfirst p,
body.android #feature-article-container .furniture-wrapper .standfirst p,
body.android #standard-article-container .furniture-wrapper .standfirst p,
body.android #comment-article-container .furniture-wrapper .standfirst p {
color: var(--headerBorder);
}
body.ios #feature-article-container .furniture-wrapper .standfirst a,
body.ios #standard-article-container .furniture-wrapper .standfirst a,
body.ios #comment-article-container .furniture-wrapper .standfirst a,
body.android #feature-article-container .furniture-wrapper .standfirst a,
body.android #standard-article-container .furniture-wrapper .standfirst a,
body.android #comment-article-container .furniture-wrapper .standfirst a,
body.ios #feature-article-container .furniture-wrapper .meta .byline__author,
body.ios #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #standard-article-container .furniture-wrapper .meta .byline__author,
body.ios #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #comment-article-container .furniture-wrapper .meta .byline__author,
body.ios #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.android #feature-article-container .furniture-wrapper .meta .byline__author,
body.android #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.android #standard-article-container .furniture-wrapper .meta .byline__author,
body.android #standard-article-container .furniture-wrapper .meta span.
