Issue
I am working on a personal website as a beginner and I have the font available to me. When I add it with a font face on my hero banner, it shows up weirdly. I don't know if that's because the font just won't work with the site or not.
Here is what I currently get:
The font should be in the middle and left of the banner, and the text should be white. I tried different variations of font-face and I tried adding styles to space out the letters. I tried another response from this post.
However, that didn't work. Any suggestions?
My hero code and CSS:
body {
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
color: black;`enter code here`
}
img{
opacity: 50%;
}
.croppedbanner {
width: 100%;
height: 200px;
object-position: 0% 39%;
object-fit: cover;
}
.container{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
div.hero-text{
font-family: khFont;
letter-spacing: 5px;
font-size: 55px;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
transform: translate(0px, -200px);
margin-left: 10px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: red;
}
@font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
EDIT 1: Ok so I managed to get different colors that aren't black and white. But I kind of need those two colors. The colors are also different between browsers. Google Chrome - is in Light Mode and Opera GX - is in Dark Mode. The dark mode one I can't turn off.
Here's a screenshot of the website with both browsers.
I (think) I am holding the site locally on my pc, as I only see an IP address at the bar. So I can't share the site.
Additionally, the code was edited to show in its entirety. This is just for the hero banner, so the HTML will be small, and I did some extra steps for the banner too. If you want to throw in suggestions for that, feel free :)
Solution
i think i can give a helpful solution for you.
First, let me try to show you about how to use css selector while coding a web page.
There was more than one selector that we can use.
For this case, i should recommend you to using class selector, or maybe child selector.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
/*With child combinator selector*/
div > .hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
@font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For the documentation of using selector, you can read more in this link.
And the second is, let's start to edit the class to fixing the output in the interface.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
display: block;
margin: 0 auto;
text-align: center;
}
@font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For more details, you can read in these documentations:
Thank you
Answered By - Taufik Romadhon
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.