이 CSS 코드는 "Guardian Headline Full"이라는 사용자 정의 글꼴 패밀리를 정의하며, 여러 글꼴 두께와 스타일을 포함합니다. 라이트, 레귤러, 미디엄, 세미볼드 두께가 각각 일반체와 이탤릭체 변형으로 제공됩니다. 글꼴은 다양한 브라우저 간 호환성을 보장하기 위해 Guardian 서버에서 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;
}
@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;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}
"Guardian Headline Full" 글꼴은 여러 스타일과 두께로 제공됩니다. 레귤러 이탤릭 스타일은 글꼴 두께 400을 사용하며 woff2, woff, truetype 형식의 파일을 포함합니다. 미디엄 스타일은 두께 500이며 일반체(이탤릭 아님)입니다. 미디엄 이탤릭도 두께 500을 사용하지만 이탤릭체입니다. 세미볼드 스타일은 두께 600의 일반체이며, 이탤릭 버전도 동일한 두께를 가집니다. 볼드 스타일은 두께 700의 일반체이고, 볼드 이탤릭은 두께 700의 이탤릭체입니다. 블랙 스타일은 두께 900의 일반체이며, 블랙 이탤릭은 두께 900의 이탤릭체입니다. 각 스타일은 동일한 소스 디렉토리에서 woff2, woff, truetype 형식의 글꼴 파일을 제공합니다.
제공된 텍스트는 CSS 글꼴 정의와 웹사이트(아마도 The Guardian)의 반응형 그리드 레이아웃 규칙이 혼합된 것으로 보입니다. 다음은 의미를 유지하면서 기술적 표현을 단순화한 유창하고 자연스러운 영어 재작성입니다:
이 CSS 코드는 사용자 정의 글꼴과 기사 콘텐츠의 레이아웃을 정의합니다. "Guardian Headline"의 볼드, 블랙, 이탤릭 스타일과 "Guardian Titlepiece"의 볼드에 대한 글꼴 파일을 지정합니다. 레이아웃은 화면 크기에 따라 변경되는 그리드 시스템을 사용합니다.
작은 화면에서는 그리드가 단일 열로 구성되며 미디어, 제목, 헤드라인, 스탠드퍼스트, 라인, 메타, 본문 영역이 수직으로 쌓입니다. 화면이 넓어짐에 따라 레이아웃이 조정됩니다: 몰입형 이미지의 캡션에 패딩이 추가되고, 그리드에 간격이 생기며, 중간 크기 화면에서 메인 콘텐츠 영역에 오른쪽 패딩이 추가됩니다.
더 큰 화면에서는 그리드가 두 개의 열(메인 콘텐츠 영역과 오른쪽 사이드바)로 구성되며, 다양한 콘텐츠 영역이 이들 열에 할당됩니다. 가장 큰 화면에서는 왼쪽 테두리가 추가되고 스탠드퍼스트 및 이미지 캡션과 같은 요소의 배치가 이에 따라 조정됩니다.
몰입형 캡션이 있는 인터랙티브 그리드 피규어의 경우 상단에 4픽셀의 패딩을 설정하고 다른 곳에는 0으로 설정합니다. 다양한 콘텐츠 섹션에서 라인과 메타 요소를 그리드 내 행 2, 열 1에서 행 5, 열 2까지 배치합니다. 라인을 콘텐츠 높이에 맞게 조정하고 상단 여백을 5px로 설정하며, 메타 요소에 18px의 상단 여백을 추가합니다.
더 넓은 화면에서는 다양한 콘텐츠 영역에 대한 특정 너비로 그리드 열을 정의합니다.
iOS 및 Android 기기의 경우, 기사 헤더를 특정 글꼴과 두께로 스타일링합니다. 섹션 이름은 대문자로 시작하도록 하고, 키라인에 대한 상단 패딩을 조정하며, 바이라인 작성자를 볼드로 설정합니다. 이미지 피규어는 자동 높이로 유지하고 아톰 요소 이후의 추가 여백을 제거합니다.
지정된 URL에서 Light 및 Light Italic 두께로 Guardian Headline 글꼴을 로드합니다.
제공된 텍스트는 "Guardian Headline Full"이라는 글꼴 패밀리에 대한 일련의 CSS font-face 규칙으로 보입니다. 이 규칙들은 레귤러, 이탤릭, 미디엄, 볼드 등과 같은 다양한 글꼴 두께와 스타일을 정의하고, 브라우저가 다운로드하여 사용할 실제 글꼴 파일(WOFF2, WOFF, TTF와 같은 형식)이 위치한 웹 주소를 지정합니다.
@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) {
.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;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element
