특정 페이지만 다른 폰트를 적용하는 방법
본문
그누보드 5 기반 사이트를 제작 중입니다.
1. intro 페이지를 따로 만들어 사용하고 싶은데, 폰트 적용이 웹사이트 자체의 기본 폰트로 설정되어 있는 나눔고딕으로만 적용됩니다. html만 따로 빼내서 html 사이트를 만들면 문제없이 적용되는데, 사이트의 가장 상위 폰트가 나눔고딕이라 그런 것 같습니다.
_head.php, _head.sub.php 두 개 다 css 시트 추가해보았지만 폰트만 적용이 되질 않습니다. 어떤 경로를 수정해야 원활하게 폰트를 이 페이지에만 다른 것으로 적용할 수 있을까요??
2. 참고한 소스 https://codepen.io/fabricelejeune/pen/wMzVXr 는 이쪽인데, html페이지에서는 텍스트가 아무것도 없는 상태에서 등장하나 php에서 구동시키면 텍스트 애니메이션이 원활하게 등장하지 않고 처음부터 다 뜬 후> 도로 재생이 됩니다. 이 부분은 어떻게 해결하는 것이 좋을까요? (로딩 js를 넣는 방법을 사용해야할까요?)
index.php
<?php
include_once('./_common.php');
include_once('./_head.sub.php');
add_stylesheet('<link rel="stylesheet" href="'.G5_CSS_URL.'/style.intro.css">', 0);
$result = sql_query($sql_common);
?>
<main>
<p class="haunted-text" data-haunted-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis molestie est quis sodales.</p>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.velocity/0.11.9/jquery.velocity.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.blast/2.0.0/jquery.blast.min.js"></script>
<script>
var $hauntedText = $('[data-haunted-text]');
var maxDuration = 2000;
var maxDelay = 500;
var minDuration = maxDuration - maxDelay;
$hauntedText.blast({
delimiter: 'character',
});
setTimeout(function() {
$hauntedText.find('.blast').each(function(i, el) {
var $el = $(el);
var duration = getRandomValue(minDuration, maxDuration);
var delay = maxDuration - duration;
var blur = getRandomValue(2, 10);
// From
$el.velocity({
opacity: 0,
blur: blur,
}, {
duration: 0,
});
// To
$el.velocity({
opacity: 1,
blur: 0,
}, {
duration: duration,
delay: delay,
ease: [250, 0],
});
});
$hauntedText.css({visibility: 'visible'});
}, 500);
var getRandomValue = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
<?php
include_once('./_tail.sub.php');
?>
style.intro.css
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
html {
box-sizing: border-box;
font-family: 'Playfair Display', serif;
font-size: 62.5%;
line-height: 1.6;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
font-family: 'Playfair Display', serif;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #fff;
}
main {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.haunted-text {
position: relative;
top: 50%;
left: 50%;
width: 40%;
max-width: 680px;
margin: 0;
transform: translate(-50%, -50%);
font-size: 2.4rem;
line-height: 1.4;
text-align: center;
visibility: hidden;
}
.haunted-text .blast {
will-change: opacity, filter;
}
답변 1
헤드파일을 복사해서 별도로 만드셔서
css파일을 새로 만든 헤드에 적용하시면 됩니다
intro 폴더 내의 _head.sub.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_PATH.'/_head.sub.php');
add_stylesheet('<link rel="stylesheet" href="'.G5_CSS_URL.'/style.intro.css">', 0);
?>
intro 폴더 내의 _head.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_PATH.'/_head.php');
add_stylesheet('<link rel="stylesheet" href="'.G5_CSS_URL.'/style.intro.css">', 0);
?>
둘 다 적용해봤는데 다른 css는(글씨크기, 색, 지웠지만 배경색 등등) 다 적용되고 폰트만 적용이 안되어요.... 혹시 헤드파일에서 고칠 부분이 있는걸까요?
답변을 작성하시기 전에 로그인 해주세요.
