这段CSS代码为名为Lenis的平滑滚动库设置了样式。它确保页面高度自动调整，并在滚动停止时控制溢出行为。同时，代码为"Guardian Headline Full"字体家族定义了自定义字体，包含多种字重和样式（如细体、常规体、中等体和半粗体，每种均有常规和斜体版本），并从特定网址以不同文件格式加载这些字体。
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf) format("truetype");
font-weight: 600;
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-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;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
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-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
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-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
Guardian Headline Full字体家族包含多种样式，每种样式均以多种格式提供。常规样式的字重为400，字体样式为正常，文件格式包括WOFF、WOFF2和TrueType。斜体版本的字重也为400，但采用斜体样式。中等字重（500）提供正常和斜体两种样式。同样，半粗体（600）和粗体（700）字重也提供正常和斜体变体。黑色字重以WOFF2格式提供。
@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;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas: "media" "title" "headline" "standfirst" "lines" "meta" "body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas: "title" "headline" "standfirst" "media" "lines" "meta" "body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas: "title right-column" "headline right-column" "standfirst right-column" "media right-column" "lines right-column" "meta right-column" "body right-column" ". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas: "title border headline right-column" ". border standfirst right-column" ". border media right-column" ". border body right-column" ". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
/ 规则在此处继续 /
}
}
这段CSS代码为各种元素设置了特定样式。对于交互式网格内容，它移除了摘要部分的底部内边距，并调整了沉浸式图片说明的内边距。同时，它还在网格布局中定位了线条和元数据，设置了它们的高度和边距。
在较大屏幕上，网格使用定义的列宽。对于移动设备，它修改了文章标题的排版，使版块名称大写并调整作者姓名的样式。它还确保图片正确显示，并管理嵌入式元素周围的间距。
滚动提示工具采用渐变背景样式，并定位在视口底部，而粘性图片说明则设置了固定高度和绝对定位。粘性图片说明栏位于屏幕左下角，背景为深色。它采用灵活的布局来分隔内容，并包含内边距。在较大屏幕上，它添加了左边框并调整了左外边距。
内部，一个图片说明包装器包含图片说明。每个图片说明使用弹性显示，项目之间有小的间隙。图片说明内的图标具有固定尺寸和特定的填充颜色。图片说明文本使用特定字体，在需要时用省略号截断，并与文章文本颜色匹配。
图片说明的切换按钮是透明且无边框的，位于栏的底部。其图标在悬停时平滑旋转和缩放。展开时，图片说明栏调整其高度，正常显示图片说明而不截断，并改变切换图标的旋转方向。
对于iOS和Android设备，图片说明段落边距被移除，特定的span元素被显示或隐藏。在这些设备上展开时，第一个图片说明段落向左浮动，第二个显示为块级元素。在iOS上，粘性栏的底部位置也会调整。
CSS自定义属性（CSS变量）为各种文章元素（如背景、文本、链接和强调色）定义了深色配色方案。这些变量为根元素和文章元素设置，并对悬停状态进行了一些调整。
媒体查询应用了深色配色方案偏好，为元素（如引用块和背景）设置特定颜色，除非明确选择浅色方案。
文章标题使用网格布局来排列媒体、标题和正文等区域。水平类添加上边距和底部内边距。正文内容在较小屏幕上具有负的侧边距，在较大屏幕上则移除。正文内的特定元素，如段落、列表、引用块和标题，被定位以进行样式设置。
对于文章正文内的元素，如段落、列表、引用块、标题、视频容器、YouTube组件和引用块，添加0 10px的内边距。
在宽度超过30em的屏幕上，为相同元素将内边距增加到0 20px。
在宽度超过61.25em的屏幕上，完全移除这些元素的内边距。
对于正文内的广告位容器，在宽度超过46.25em的屏幕上添加0 20px的外边距。在宽度超过61.25em的屏幕上移除此外边距。
将文章背景颜色设置为#121212。在宽度小于61.25em的屏幕上，防止文章水平溢出。
从原子元素中移除内边距，并隐藏文章中具有边框角色的元素。
相对定位文章内的元素，如摘要、段落、引用块、列表、内联图片、交互式图片、标题、水平线、视频容器、广告位、YouTube组件和引用块。
在宽度超过71.25em的屏幕上，对这些相同的定位元素应用`:before`伪元素。CSS代码为文章内的各种元素设置样式。它在某些元素（如广告位、YouTube块、引用块和段落）前添加一条垂直线，使用1px宽、#606060颜色的线，并定位在左侧。水平线（`hr`）在交互式内容列中设置为可见，并赋予背景颜色。
对于较大屏幕（宽度超过71.25em），调整这些线的位置和高度。主要媒体区域，包括具有`data-gu-name=media`的元素，被样式化为跨越特定的网格区域，并响应式地应用边距和渐变。在较宽的屏幕上，渐变叠加被隐藏，媒体内的图片说明不显示。
标题在较小屏幕上通过负边距进行调整，并在较大屏幕上赋予特定的宽度和定位，确保在不同设备尺寸上的正确布局。文章内的标题部分没有内边距。主标题使用特定的字体
