This is my html code---->
<div data-role="page" id="page1" >
<div data-role="header" data-theme="b">
<h1>header</h1>
</div>
<div data-role="content">
<p id="myfont">content</p>
</div>
<div data-role="footer" >
<h1>footer</h1>
</div>
</div>
</body>
This is my CSS code------->
@font-face{
font-family:'Byron Medium';
src:url('byronmedium.ttf');
// font-size:'60px';
}
div #myfont{
font-family:'Byron Medium';
font-size:'60px';
}
My Custom font-family and font-size is coming on page please help me
If I had to guess, I'd say your font name is wrong.
try
@font-face{
font-family:'Byron Medium';
src:url('byronmedium.ttf');
// font-size:'60px';
}
true-type fonts are generally .ttf, no ?
please try this may i sure your solution done.
please add eot, woff, svg, formate
and add @font-face
kit on your css style.
@font-face{
font-family:'Byron Medium';
src:url('byronmedium.tff');
// font-size:'60px';
src: url('byronmedium-webfont.eot');
src: url('byronmedium-webfont.eot?#iefix') format('embedded-opentype'),
url('byronmedium-webfont.woff') format('woff'),
url('byronmedium-webfont.ttf') format('truetype'),
url('byronmedium-webfont.svg#byronmedium') format('svg');
font-weight: normal;
font-style: normal;
}
.myfont{
font-family:'Byron Medium';
font-size:'60px';
}
HTML
<div data-role="page" id="page1" >
<div data-role="header" data-theme="b">
<h1>header</h1>
</div>
<div data-role="content">
<p class="myfont">content</p>
</div>
<div data-role="footer" >
<h1>footer</h1>
</div>
</div>
Your selector to apply the font is div #myfont
, but you're selecting on an id, so the div
is redundant.
Try changing this:
div #myfont{
font-family:'Byron Medium';
font-size:'60px';
}
to this:
#myfont{
font-family:'Byron Medium';
font-size:'60px';
}
or better still, use a class ( .myFont
), and apply that to any element that you want to use the font for.
Remove the div element from your css definition,
@font-face{
font-family:'Byron Medium';
src:url('byronmedium.tff');
// font-size:'60px';
}
#myfont
{
font-family:'Byron Medium';
font-size:'60px';
}
Since the element with the myfont
id
is a paragraph that is not a child of a division, your current selector matches nothing in your sample markup. Change it to
#myfont { /*...*/ }
Also, for better browser support, you'll want to look into adding more file formats than .ttf
, unless you know for a fact that you're only dealing with browsers that can handle TrueType fonts.
使用可以将@font应用于div内的<p>
标记,您可以使用div p{font-family:myFirstFont;}
或将类应用于<p class="yourclassname">
或从您的CSS中删除div
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.