특정 페이지만 다른 폰트를 적용하는 방법 채택완료
예봄
4년 전
조회 2,691
그누보드 5 기반 사이트를 제작 중입니다.
1. intro 페이지를 따로 만들어 사용하고 싶은데, 폰트 적용이 웹사이트 자체의 기본 폰트로 설정되어 있는 나눔고딕으로만 적용됩니다. html만 따로 빼내서 html 사이트를 만들면 문제없이 적용되는데, 사이트의 가장 상위 폰트가 나눔고딕이라 그런 것 같습니다.
_head.php, _head.sub.php 두 개 다 css 시트 추가해보았지만 폰트만 적용이 되질 않습니다. 어떤 경로를 수정해야 원활하게 폰트를 이 페이지에만 다른 것으로 적용할 수 있을까요??
2. 참고한 소스 https://codepen.io/fabricelejeune/pen/wMzVXr 는 이쪽인데, html페이지에서는 텍스트가 아무것도 없는 상태에서 등장하나 php에서 구동시키면 텍스트 애니메이션이 원활하게 등장하지 않고 처음부터 다 뜬 후> 도로 재생이 됩니다. 이 부분은 어떻게 해결하는 것이 좋을까요? (로딩 js를 넣는 방법을 사용해야할까요?)
index.php
</p>
<p><?php
include_once('./_common.php');
include_once('./_head.sub.php');</p>
<p>add_stylesheet('<link rel="stylesheet" href="'.G5_CSS_URL.'/style.intro.css">', 0);</p>
<p>$result = sql_query($sql_common);
?></p>
<p>
<main>
<p class="haunted-text" data-haunted-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis molestie est quis sodales.</p>
</main></p>
<p> <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></a>
<script src="<a href="https://cdn.jsdelivr.net/jquery.velocity/0.11.9/jquery.velocity.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/jquery.velocity/0.11.9/jquery.velocity.min.js"></script></a>
<script src="<a href="https://cdn.jsdelivr.net/jquery.blast/2.0.0/jquery.blast.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/jquery.blast/2.0.0/jquery.blast.min.js"></script></a></p>
<p> <script></p>
<p>var $hauntedText = $('[data-haunted-text]');
var maxDuration = 2000;
var maxDelay = 500;
var minDuration = maxDuration - maxDelay;</p>
<p>$hauntedText.blast({
delimiter: 'character',
});</p>
<p>setTimeout(function() {
$hauntedText.find('.blast').each(function(i, el) {
var $el = $(el);</p>
<p> var duration = getRandomValue(minDuration, maxDuration);
var delay = maxDuration - duration;
var blur = getRandomValue(2, 10);</p>
<p> // From
$el.velocity({
opacity: 0,
blur: blur,
}, {
duration: 0,
});</p>
<p> // To
$el.velocity({
opacity: 1,
blur: 0,
}, {
duration: duration,
delay: delay,
ease: [250, 0],
});
});
$hauntedText.css({visibility: 'visible'});
}, 500);</p>
<p>var getRandomValue = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}</p>
<p> </script></p>
<p><?php
include_once('./_tail.sub.php');
?>
</p>
<p>
style.intro.css
</p>
<p>@import url(<a href="https://fonts.googleapis.com/css?family=Playfair+Display);" target="_blank" rel="noopener noreferrer">https://fonts.googleapis.com/css?family=Playfair+Display);</a>
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;
}</p>
<p> body {
font-family: 'Playfair Display', serif;
}</p>
<p> 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;
}</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인
[code]
<?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);
?>
[/code]
intro 폴더 내의 _head.php
[code]
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_PATH.'/_head.php');
add_stylesheet('<link rel="stylesheet" href="'.G5_CSS_URL.'/style.intro.css">', 0);
?>
[/code]
둘 다 적용해봤는데 다른 css는(글씨크기, 색, 지웠지만 배경색 등등) 다 적용되고 폰트만 적용이 안되어요.... 혹시 헤드파일에서 고칠 부분이 있는걸까요?