이 CSS 코드는 "Guardian Headline Full"이라는 사용자 정의 글꼴 패밀리를 정의하며, 여러 글꼴 두께와 스타일을 포함합니다. 라이트, 레귤러, 미디엄, 세미볼드 두께가 각각 일반 버전과 이탤릭 버전으로 제공됩니다. 각 스타일에 대해 코드는 Guardian 서버에 호스팅된 세 가지 다른 글꼴 파일 형식(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-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, 일반)와 세미볼드 이탤릭(글꼴 두께 600, 이탤릭)을 사용할 수 있습니다. 볼드(글꼴 두께 700, 일반)와 볼드 이탤릭(글꼴 두께 700, 이탤릭)이 포함되며, 블랙(글꼴 두께 900, 일반)과 블랙 이탤릭(글꼴 두께 900, 이탤릭) 스타일도 있습니다. 각 스타일은 assets.guim.co.uk 도메인의 동일한 디렉토리에 있는 글꼴 파일을 참조합니다.
제공된 텍스트는 웹사이트(아마도 The Guardian)용 CSS 글꼴 정의와 반응형 그리드 레이아웃 규칙이 혼합된 것으로 보입니다. 다음은 기술적 어휘를 단순화하면서 의미를 보존하는 유창하고 자연스러운 영어 재작성입니다:
이 코드는 사용자 정의 글꼴과 기사 콘텐츠의 레이아웃을 정의합니다. 두 가지 글꼴을 지정합니다: "Guardian Headline"은 헤비 이탤릭 스타일로, "Guardian Titlepiece"는 볼드 스타일로 지정됩니다.
레이아웃은 화면 크기에 따라 변경되는 그리드 시스템을 사용합니다. 가장 작은 화면에서는 모든 것이 단일 열로 쌓입니다. 화면이 넓어질수록 레이아웃이 조정됩니다. 중간 크기 화면에서는 기본 콘텐츠에 추가 패딩이 적용됩니다. 더 큰 화면에서는 기본 콘텐츠 영역과 오른쪽 사이드바가 있는 두 열 레이아웃이 도입됩니다. 가장 넓은 화면에서는 더 복잡한 네 열 레이아웃이 사용되며, 왼쪽 테두리와 제목 및 헤드라인과 같은 요소를 별도의 열에 배치하는 것이 포함됩니다.
이 코드에는 다양한 화면 크기에서 몰입형 이미지의 캡션 스타일을 지정하는 특정 규칙도 포함됩니다.
몰입형 캡션이 있는 대화형 그리드 그림의 경우 상단에 4픽셀, 다른 곳에는 0의 패딩이 설정됩니다. 기사, 댓글, 피처 본문과 같은 다양한 콘텐츠 영역에서 대화형 그리드 내의 "lines" 및 "meta"라는 요소는 그리드의 2행부터 5행, 1열부터 2열에 배치됩니다. "lines" 요소는 콘텐츠에 맞게 조정되는 높이와 상단 여백 5픽셀을 가지며, "meta" 요소는 상단 여백 18픽셀을 가집니다.
더 큰 화면(81.25em 이상)에서 이러한 콘텐츠 영역의 대화형 그리드는 219px, 1px, 620px, 80px, 300px의 특정 너비를 가진 다섯 열 레이아웃을 사용합니다.
iOS 및 Android 기기의 경우 기사 헤더에 특별한 스타일이 적용됩니다: 스탠드퍼스트 텍스트는 미디엄 두께를 가진 특정 글꼴 패밀리를 사용하고, 섹션 키커는 첫 글자가 대문자로 표시되는 블록으로 표시되며, 키라인은 조정된 상단 패딩을 가지며, 바이라인 작성자는 볼드 세리프 글꼴을 사용합니다. 기사 내 이미지는 자동 높이를 가지며, 원자 요소 다음의 단락에는 상단 여백이 없습니다.
또한, "Guardian Headline Full"에 대한 사용자 정의 글꼴 페이스가 라이트 및 라이트 이탤릭 두께로 정의되며, woff2, woff, truetype 형식의 특정 URL에서 소싱됩니다.
제공된 텍스트는 "Guardian Headline Full"이라는 글꼴 패밀리에 대한 일련의 CSS font-face 규칙으로 보입니다. 이러한 규칙은 다양한 글꼴 두께와 스타일(레귤러, 이탤릭, 미디엄, 볼드 등)을 정의하고, 실제 글꼴 파일이 다양한 형식(WOFF2, WOFF, TTF)으로 찾을 수 있는 웹 주소(URL)를 지정합니다.
@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:
