这段CSS代码定义了一个名为"Guardian Headline Full"的自定义字体族，包含多种字重和样式。它涵盖了细体、常规体、中等体和半粗体，每种字重均提供正常和斜体版本。字体以WOFF2、WOFF和TrueType格式从《卫报》服务器加载，以确保跨浏览器兼容性。
@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的左边框。在大屏幕上，边框的左侧位置会微调。在这些栏内，原子元素没有上下边距但包含内边距。当段落位于原子元素之前时，会移除内边距并改为添加边距。行内元素被限制在最大宽度内。
对于中等屏幕及以上的行内图形，设置了最大宽度。在包含循环图形的媒体部分，标题会层叠在上方，循环按钮具有特定尺寸和对齐样式。标题按钮置于顶部。
在主体部分，自托管视频区块占据最大宽度，边距居中。这些区块内的循环图形和视频也占据全宽。对于沉浸式视频元素，宽度限制被移除，边距被调整。在大屏幕上，沉浸式视频宽度扩展并左移，标题相应缩进。
颜色变量定义了各种UI元素，如日期线、边框、标题和特色颜色，其中支柱颜色影响副标题、引文和块引用。在深色模式下，这些颜色会适配深色主题。
内容栏内的原子元素没有内边距。特定规则调整了不同内容区域（如文章、交互式内容、评论和专题）中某些元素或水平线后的首段段落，确保适当的间距和布局。登录门或水平线（最后一个除外）后的首段段落具有14像素的上内边距。
对于文章正文、交互式内容、评论、专题或具有`data-gu-name`为"body"的元素中，特定元素（如原子元素、登录门或水平线，非最后一个）后的首段的首字母，应用特殊的首字下沉样式。该样式使用特定的标题字体，将字体大小设为111像素，行高92像素，向左浮动，大写，添加8像素的右外边距，与文本顶部对齐，并使用自定义变量为下沉字母着色。
这些内容区域中紧接水平线后的段落应无上内边距。
这些内容区域内的引文被限制在最大620像素的宽度内。
主内容、专题文章、标准文章和评论部分中展示元素的标题静态定位，占据最大620像素的全宽。
沉浸式元素横跨整个视口宽度，考虑滚动条。在大屏幕上（最大71.24em），其最大宽度为978像素，标题内边距在不同断点处调整。在中等屏幕上（46.25em至61.24em之间），最大宽度为738像素。在较小屏幕上（46.24em以下），沉浸式元素向左边缘对齐，边距和标题内边距相应调整。
对于更宽的屏幕（61.25em以上），家具包装器使用CSS网格布局，定义列和行以定位标题、头条、元数据、导语和肖像等元素。
CSS样式定义了文章组件的布局包装器。头条具有上边框，尺寸从32像素调整到大屏幕上的50像素，最大宽度也相应变化。元信息在宽屏幕上包含装饰性顶线。导语部分具有带自定义颜色的下划线链接，悬停时颜色变化，其首段在较小屏幕上有上边框，在大屏幕上移除。导语中在宽屏幕上出现垂直分隔线。
为71.25em及更宽的屏幕以及81.25em及更宽的屏幕定义了布局网格，指定了用于定位标题、头条、元数据、导语和肖像区域的列和行模板。图形具有特定的边距和最大宽度。总体而言，这些样式控制了文章标题和介绍性内容的响应式呈现。
对于宽度超过740像素的屏幕，隐藏具有类`.keyline-4`或属性`[data-gu-name="lines"]`的元素。在`.furniture-wrapper`内，使用自定义颜色变量为这些元素内的SVG描边设置样式。
在中等屏幕及以上，移除具有ID`#meta`或属性`[data-gu-name="meta"]`的元素的右边距。
在元部分内，将社交链接、评论元素及其子元素的边框颜色设置为自定义变量。同时，隐藏特定容器内的任何`gu-island`元素。
对于导语部分，调整其定位和内边距，添加左侧偏移。在中等屏幕上，添加较小的上内边距。将内部段落的样式设置为常规字重，20像素大小，底部内边距。
主媒体区域相对定位，放置在“肖像”网格区域，并赋予特定边距。确保其内部div占据全宽。在大屏幕上，移除底部边距。在较小屏幕上，调整宽度和左边距，并对中等偏小屏幕进行额外调整。
将图形标题样式设置为底部显示，具有自定义背景和文本颜色，覆盖默认宽度和边距。隐藏内部第一个span并显示第二个，限制其宽度。在中等屏幕上，调整标题内边距。隐藏状态使标题透明。
标题按钮位于右下角，样式为圆形背景和缩放图标，在中等屏幕上调整其位置。
对于超大屏幕上的交互式文章栏，调整伪元素的位置和高度。同时，限制二级标题的宽度。
在iOS或Android上，定义一组深色主题颜色变量。在深色模式下，调整主颜色变量。
对于iOS设备，针对不同文章容器中特定元素后的首段，并设置其首字母样式。
在iOS和Android上，文章容器中登录门后的首段，或各种文章容器中元素原子后的首段的首字母，应使用次要支柱变量着色（默认为黑色）。
在iOS和Android上，专题、标准和评论文章容器的文章标题高度应设为零。
这两个平台上这些文章容器内的家具包装器应具有4像素的上内边距和10像素的水平内边距。
家具包装器内的标签应为粗体，使用指定的字体堆栈，从新支柱变量获取颜色，并大写。
家具包装器内的头条（h1）应为32像素大小，粗体，底部内边距12像素，颜色为#121212。
家具包装器内的图像图形应相对定位，上边距14像素，左边距-10像素，宽度计算为视口宽度减去滚动条宽度，高度自动。
对于iOS上的专题文章，这些图像图形内的内部图形元素、图像和链接也应遵循这些样式规则。
对于iOS和Android设备，以下CSS规则适用：
对于文章容器内的图像：
- 将背景设置为透明。
- 使宽度等于完整视口宽度减去滚动条宽度。
- 确保高度自动调整。
对于文章导语部分：
- 添加上内边距4像素和下内边距24像素。
- 应用负右边距10像素。
对于导语内的段落：
- 使用卫报标题和衬线字体族。
对于导语内的链接：
- 将颜色设置为特定变量。
- 移除任何背景图像。
- 应用偏移6像素的下划线，具有特定的边框颜色。
- 移除任何底部边框。
对于这些链接的悬停效果：
- 应用与上述相同的样式。
对于Android设备，当悬停在评论文章导语部分的链接上时，文本下划线颜色应与新支柱颜色匹配。
在iOS和Android设备上，对于专题、标准和评论文章，元部分应无边距。在此元部分内，署名行、作者姓名和相关链接都应显示为新支柱颜色。
此外，元杂项区域应无内边距，其中的任何SVG图标应使用新支柱颜色作为描边。
在iOS和Android上，专题、标准和评论文章中的展示元素，标题按钮应显示为flex容器。它应居中，内边距5像素，尺寸28x28像素，右对齐。
在iOS和Android设备上，专题、标准和评论部分的文章正文无侧边内边距。对于这些文章中非缩略图、非沉浸式的图像，图形无边距，宽度计算为视口减去24像素和任何滚动条宽度，高度自动。其标题无内边距。
这些文章中的沉浸式图像横跨整个视口宽度，考虑任何滚动条。
使用“quoted”类样式的块引用，其装饰性before元素使用新支柱颜色。文章正文内的链接采用主支柱颜色，移除背景图像，并添加距离文本6像素的下划线，使用标题边框颜色。悬停时，此下划线变为新支柱颜色。
@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.byline__author a,
body.android #comment-
