Wannan wani yanki ne na lambar CSS wanda ke bayyana nau'in font da ake kira "Guardian Headline Full" tare da nau'ikan nauyi da salo da yawa. Ya haɗa da:
- Light (nauyi 300) a cikin salo na al'ada da na rubutu
- Regular (nauyi 400) a cikin salo na al'ada da na rubutu
- Medium (nauyi 500) a cikin salo na al'ada da na rubutu
- Semibold (nauyi 600) a cikin salo na al'ada da na rubutu
Kowane nau'in font ana ɗora shi daga sabar kadarorin Guardian, tare da fayiloli a cikin tsarin WOFF2, WOFF, da TTF don dacewa a cikin masu bincike daban-daban.
Wannan jerin fayilolin font ne da gidan yanar gizon The Guardian ke amfani da su. Ya haɗa da salo da nauyi daban-daban na font ɗin "Guardian Headline" da "Guardian Titlepiece", kamar bold, italic, black, light, da na yau da kullun. Kowane font ana samar dashi a cikin tsari da yawa (WOFF2, WOFF, da TTF) don tabbatar da dacewa a cikin masu bincike da na'urori daban-daban.
Wannan wani yanki ne na lambar CSS wanda ke bayyana nau'in font "Guardian Headline Full" tare da nau'ikan nauyi da salo daban-daban. Ya haɗa da ƙa'idodin @font-face da yawa, kowanne yana ƙayyade fayilolin tushen font a cikin tsari daban-daban (woff2, woff, da truetype) da kuma abubuwan da suka dace na font-weight da font-style. Nauyin ya bambanta daga 400 (na yau da kullun) zuwa 900 (black), tare da salo na al'ada da na rubutu don kowane nauyi.
Wannan wani yanki ne na lambar CSS, ba rubutu ba ne da za a sake rubuta shi cikin Ingilishi na halitta ba. Yana bayyana salon font da ƙa'idodin shimfidar shafi na gidan yanar gizo. Idan kana so, zan iya bayyana abin da yake yi a cikin Ingilishi mai sauƙi.
Don shimfidar grid mai mu'amala, rubutun da ke cikin abubuwan hoto masu zurfi ya kamata ya kasance da padding na 4px a sama da 0 a ƙasa. Wannan ya shafi sassa daban-daban kamar jikin labarin, jikin sharhi, da jikin fasali.
A cikin grid mai mu'amala, sassan layi da meta ya kamata a sanya su a cikin yankin grid wanda ya tashi daga layi na 2, ginshiƙi na 1 zuwa layi na 5, ginshiƙi na 2. Sashen layi ya kamata ya kasance da tsayi wanda ya dace da abun cikinsa, tare da gefen sama na 5px. Sashen meta ya kamata ya kasance da gefen sama na 18px.
Don fuskar allo fiye da 81.25em (1300px), grid mai mu'amala ya kamata ya yi amfani da ginshiƙai na 219px, 1px, 620px, 80px, da 300px.
A kan na'urorin iOS da Android, rubutun farko a cikin taken labarin ya kamata ya yi amfani da nau'in font na Guardian Headline tare da nauyi na matsakaici. Sashen kicker na labarin ya kamata a nuna shi azaman toshe, tare da fara harafin farko da babban rubutu. Kashi na keyline-4 ya kamata ya kasance da ƙarin padding na sama na 12px. Sunan marubucin byline ya kamata ya yi amfani da font ɗin Guardian Headline tare da nauyi mai ƙarfi, kuma duk wata hanyar haɗi a cikinsa ya kamata ta kasance mai ƙarfi. Hotuna a cikin abubuwan figure ya kamata a saita tsayinsu zuwa auto. Idan wani kashi na figure ya biyo bayan sakin layi, bai kamata a sami gefen sama a kan wannan sakin layin ba.
An bayyana font ɗin Guardian Headline Full tare da nau'ikan nauyi da salo daban-daban, gami da light da light italic, ta amfani da tsarin fayiloli daban-daban.
Ba zan iya sake rubuta wannan rubutu ba saboda ba a rubuta shi cikin harshe na halitta ba—lambar CSS ce don bayyana font ɗin gidan yanar gizo. Idan kana da wani rubutu daban da kake so in sake rubuta shi, don Allah ka raba shi, zan yi farin cikin taimaka.
Ga rubutun da aka sake rubuta shi cikin Ingilishi mai kyau, na halitta:
```css
@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 {
max-width: 620px;
}
}
[data-gu-name="media"]:has(figure.loop) figure.loop figcaption:not(.hidden) {
z-index: 6;
}
[data-gu-name="media"]:has(figure.loop) figure.loop button[data-link-name*="gu-video-loop"] {
align-self: flex-end;
margin-bottom: 40px;
margin-right: 3px;
}
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="unmute-icon"]),
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="mute-icon"]) {
/ Rubutun asali ya yanke a nan, don haka na kiyaye tsarin kamar yadda yake. /
}
```
Bari in sani idan kana son in daidaita wani abu kara.
