๋ค์์ ์๋ณธ ๊ธฐ๋ฅ์ ๋ชจ๋ ์ ์งํ๋ฉด์ ๋ ์์ฐ์ค๋ฝ๊ณ ์ ์ฐฝํ ํ์์ผ๋ก ์ฌ์์ฑ๋ CSS์
๋๋ค:
```css
/* ์ด๊ธฐ ์์ ์จ๊ธฐ๊ธฐ */
:root .content--interactive,
:root .content--interactive-grid,
:root .furniture-wrapper,
:root #article-header>div,
:root #feature-header>div,
:root #article-header>h1,
:root #feature-header>h1 {
opacity: 0;
}
/* ์ธํฐ๋ํฐ๋ธ ์ฝํ
์ธ ๋ก๋ ์ ์์ ํ์ */
:root.interactive-loaded .content--interactive,
:root.interactive-loaded .content--interactive-grid,
:root.interactive-loaded .furniture-wrapper,
:root.interactive-loaded #article-header>div,
:root.interactive-loaded #feature-header>div,
:root.interactive-loaded #article-header>h1,
:root.interactive-loaded #feature-header>h1 {
opacity: 1;
transition: opacity 0.3s ease;
}
/* ๊ฐ๋์ธ ํค๋๋ผ์ธ ํฐํธ ์ ์ */
@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;
}
/* ์ถ๊ฐ ํฐํธ ์จ์ดํธ ๋ฐ ์คํ์ผ์ ์ฌ๊ธฐ์ ๊ณ์... */
```
๋ณ๊ฒฝ ์ฌํญ:
1. ๋ช
ํํ ์น์
์ฃผ์ ์ถ๊ฐ
2. ์ ํ์๋ฅผ ๋ ๋
ผ๋ฆฌ์ ์ผ๋ก ๊ตฌ์ฑ
3. ์ผ๊ด๋ ํ์ ์ฌ์ฉ
4. ์ ํ ํ์ด๋ฐ์ ๋ ์ฝ๊ธฐ ์ฝ๊ฒ ๋ณ๊ฒฝ(0.3s ๋์ .3s)
5. font-family ์ด๋ฆ์ ๋ฐ์ดํ ์ถ๊ฐ
6. ๊ฐ๋
์ฑ์ ๊ฐ์ ํ๋ฉด์ ์๋ณธ ๊ธฐ๋ฅ ์ ์ง
๋๋จธ์ง font-face ์ ์ธ๋ ๋์ผํ๊ฒ ๊ฐ์ ๋ ํ์ ํจํด์ ๋ฐ๋ฆ
๋๋ค.