'我视之为剥削'：留英国际学生的残酷现实

《卫报》标题全字体系列包含多种样式，每种样式具有不同的字重和斜体版本。细体（字重300）提供常规和斜体样式，常规体（字重400）同样如此。中等体（字重500）和半粗体（字重600）也均提供常规与斜体选项。每个字体文件均可从《卫报》服务器获取WOFF2、WOFF和TrueType格式。@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}

@font-face {
font-family: Guardian Titlepiece;
src: url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}

@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
}
}主要交互内容栏对元素有特定的样式设置。例如，原子元素没有上下边距，但有12像素的内边距。当段落跟随原子元素时，原子元素的内边距被移除，边距设置为12像素。内联元素的宽度限制在620像素。

对于具有循环角色的图形，标题定位的z-index为6。循环按钮的样式设置为32像素宽，右下对齐，具有特定的边距。标题按钮的z-index高达100。

自托管视频元素的宽度设置为100%，上限为620像素，显示为块级元素，具有12像素的边距。视频及其容器也占据最大620像素的完整宽度并居中。如果视频是沉浸式的，则取消宽度限制和边距，完全扩展。在较大屏幕上，沉浸式视频扩展至1140像素宽，具有负的左外边距；在更大尺寸下，它们变为1300像素宽，具有更大的负外边距。

颜色变量定义了各种主题颜色，如日期线灰色、标题边框、标题文本和专题红色。在深色模式下，一些颜色会调整为深色主题调色板。

在文章正文中，原子元素或水平线后的第一个段落具有额外的上内边距。此外，原子元素后的第一个段落的第一个字母有样式设置，但此处未详细说明具体样式。CSS代码定义了网站不同部分的首字下沉、引文和各种布局元素的样式。首字下沉使用特定的字体、大小和颜色，并左浮动。引文设置了最大宽度。对于展示元素，标题设置为静态位置，宽度为100%，最大宽度为620像素。

沉浸式元素设置为占据视口宽度减去滚动条的完整宽度。在小于71.24em的屏幕上，其最大宽度调整为978像素，标题内边距随屏幕尺寸变化。在中等屏幕（46.25em至61.24em）上，最大宽度为738像素。在小屏幕（小于46.24em）上，沉浸式元素具有负的左外边距以延伸至视口边缘，标题内边距相应调整。

对于较大屏幕（超过61.25em），家具包装器使用网格布局，创建两列结构，为标题、头条、导语、元数据和肖像部分定义行。头条元素的第一个子元素添加了上边框，元数据部分的定位设置为绝对。家具包装器将导语内容设置为相对位置，上内边距为2像素，无右边距。在导语内，主要内容区域的下边距为4像素。导语内的列表项使用20像素的字体大小。导语内的链接（包括列表项中的链接）无边框、无背景图像，下划线偏移为6像素，使用自定义颜色作为下划线。悬停时，下划线颜色更改为新的支柱颜色。

导语中的第一个段落有上边框，无下内边距。对于较大屏幕（61.25em及以上），如果屏幕宽度至少为71.25em，则移除上边框。对于宽度至少为61.25em的屏幕，图形无左外边距，内联时最大宽度为630像素。

在屏幕宽度为71.25em及以上时，家具包装器使用具有特定列和行的网格布局。元数据部分前出现一条装饰线，宽度为540像素。导语中的段落无上边框，导语内容前添加一条垂直线。对于更大的屏幕（81.25em及以上），网格调整，列和行更多，元数据前的装饰线延伸至620像素，导语前的垂直线略微移动。

文章标题或标题部分的标签上内边距为2像素。头条使用粗体字重，最大宽度为620像素，字体大小为32像素。在较大屏幕（71.25em及以上）上，头条调整为最大宽度540像素，字体大小为50像素。

对于中等屏幕（46.25em及以上），关键线或线条元素无右边距。在较大屏幕（61.25em及以上）上，这些线条被隐藏。线条使用自定义颜色作为描边。此CSS代码定义了网页布局的样式，特别是针对家具主题包装器。它设置了元信息、导语文本、主要媒体和标题等元素的各种属性。样式包括边距、内边距、颜色和定位的调整，并使用媒体查询针对不同屏幕尺寸制定特定规则。设计使用自定义CSS变量表示颜色，如`--darkBackground`和`--headerBorderColor`，并确保元素根据视口宽度隐藏或显示。包装器具有深色背景，并包含从移动设备到桌面设备的响应式行为。CSS代码为家具包装器类内的元素设置样式。标题（h1）为粗体和浅灰色（#dcdcdc）。标题中的图形无上边距，下边距较小。

对于宽度超过71.25em的屏幕，元数据部分前出现一条彩色线。元数据部分的文本和摘要为浅灰色。社交媒体链接和按钮有彩色边框，并使用特定颜色表示文本和图标，悬停时变为深色背景。

元数据部分的链接使用特定颜色，悬停时保持相同颜色并匹配下划线。在导语部分，链接带有浅灰色下划线，悬停时颜色改变，段落文本为浅灰色。在较宽的屏幕上，第一个段落可能有或没有上边框。导语中的列表项也为浅灰色。

对于宽度超过71.25em的屏幕，导语前出现一条线。在宽度超过46.25em的屏幕上，包装器获得深色背景和右边框。家具包装器使用伪元素创建侧边框。`:before`元素位于左侧，具有深色背景和左边框，其宽度和左侧位置根据视口宽度、滚动条宽度和738像素的固定基准宽度计算。`:after`元素在右侧镜像此效果，具有右边框。

对于较大屏幕（最小宽度61.25em），计算调整为978像素的基准宽度。这种模式继续适用于更大的断点：71.25em（1138像素基准）和81.25em（1298像素基准）。

在包装器内，SVG描边和某些社交/元元素边框设置为使用自定义CSS变量颜色`--headerBorderColor`。

在文章正文中，二级标题（`h2`）的字重为200，但如果它们包含`strong`元素，则字重增加到700。

最后，定义了几个`@font-face`规则，用于从《卫报》资产服务器加载“Guardian Headline Full”字体系列的各种字重和样式（细体、细斜体、常规体、常规斜体）。@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
font-style: italic;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.ttf) format("truetype");
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full