#font-face{
font-family:'Above';
src: url(C:\Windows\Fonts\AboveDEMORegular);
font-family:'banshrift';
src: url(../fonts/bahnschrift.ttf);
font-family: 'century gothic';
src: url(../fonts/GOTHIC.TTF);
}
.backgroundg{
background-image: linear-gradient(to bottom ,rgb(217,165,122),rgb(214,150,187),rgb(195,142,173)100%);
height: 700px;
margin: -10px -8px;
}
#logo{
padding: 40px 0 0 52px;
display: inline;
width: 270px;
}
#navlist{
display: inline;
list-style: none;
float: right;
margin: 50px 70px 0 0 ;
}
#navlist li{
display: inline;
margin: 0 20px 0 100px;
font-family:'banshrift';
font-size: 30px;
}
I linked the banschrift ttf file to my CSS (I did copy it from the system and put it in a folder I made named fonts) and the font doesn't work on the list I made.
I also tried it with the Above DEMO ttf but nothing.
if anyone could give me some tips about what should be done, I'll appreciate it.
You can use the #font-face separate for each font-family
#font-face{
font-family:'banshrift';
src: url(../fonts/bahnschrift.ttf);
}
#font-face{
font-family: 'century gothic';
src: url(../fonts/GOTHIC.TTF);
}
Try the #font-face like this
Related
I have defined my Font-size as 98% in the body, just as follows:
body {
color: #6B6B6B;
background-color: #262626;
font-family: arial, sans-serif;
font-size: 98%;
line-height: 1.32;
text-align: center;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
The problem now, how can I make my h1 a bit bigger? and h2 big as well?
I tried:
h1 {
font-size: 120%;
line-height: 1;
}
But I don't think this is right, do I need to use px or em for my headers?
Using % is valid CSS.
You can have
h1{
font-size:150%;
}
You can use em what is able to scale your font. For example:
h1 {
font-size: 1.2em;
line-height: 1;
}
is equal to 120% of current font size.
Here you have useful article about font sizing.
Base on #verbose-mode comment, you can avoid the h1 and h2 elements to be selected by using the :not selector:
body {
color: #6B6B6B;
background-color: #262626;
font-family: arial, sans-serif;
line-height: 1.32;
text-align: center;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
body *:not(h1):not(h2){
font-size: 30%;
}
You can see this fiddle.
I have this basic css style.
What am i trying to do is to make the text responsive(fonts), i know i have to use ems / rems to do that ( i choose rems with a fallback to px not sure if it's right but you can see in the code how i did, the px i'm not sure if i set it right), the formula i used was font size divided by 16px.
Now we have a relative font size for h tags i think.. but still if i would like to resize the browser doesn't do any magic. Can you help me understand how to make the fonts responsive using rems or something else, using rems/other on setting margins, paddings, line-height? a complex example and explanation is welcomed :-d thank you very much for your time.
html {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
color: #000000;
position: relative;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100%;
min-width: 0;
}
html,
body {
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
margin: 0 0;
margin: 0 0;
}
h1 {
font-size: 3px;
font-size: 3rem;
}
h2 {
font-size: 2.25px;
font-size: 2.25rem;
}
h3 {
font-size: 1.5px;
font-size: 1.5rem;
}
h4 {
font-size: 1.125px;
font-size: 1.125rem;
}
h5 {
font-size: 1px;
font-size: 1rem;
}
h6 {
font-size: 0.875px;
font-size: 0.875rem;
}
Here is a comparison between the sizing units: http://www.narga.net/understanding-font-sizing-in-css-em-px-pt-percent-rem/
This should get you pointed in the right direction.
I am trying to make the font in h1 less bold. It seems like the letters are just to fat.
CSS:
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 110px;
text-align: center; margin: 0px; }
#font-face {
font-family: 'ballparkweiner';
src: url('ballw___.eot');
src: url('ballw___.eot?#iefix') format('embedded-opentype'),
url('ballw___.woff') format('woff'),
url('ballw___.ttf') format('truetype'),
url('ballw___.svg#ballparkweiner') format('svg');
font-weight: normal;
font-style: normal;
}
h2 { margin: 0px; text-align: center; font-size: 40px; color: #FFFFFF; font-family: Cambria;}
body {background-color: #000000;}
h3 {text-align: center; color: #FFFFFF; }
#footer { font-weight: bold; text-align: center; font-family: Audimat;
clear: both; width:48%;
border-radius: 8px;
background-color:black;
text-align:center; margin-right:auto;
margin-left:auto; color: #FFFFFF; }
From the information I gathered on-line, most said to use font-weight: lighter;
but that doesn't validate when I use the css validator. Any ideas?
Add this:
h1 { font-weight: normal; }
By default, browsers use bold weight for h1. Since your #font-face declares only normal weight typeface, (some) browsers will algorithmically bold the glyphs (i.e., make the strokes wider using some simple method).
I checked your css validate, where did you checked? Probably you checked for css2 validation. Check here this one is original/best http://jigsaw.w3.org/css-validator/validator
I actually just added the font weight line (I had it under the #font face instead )
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 110px;
text-align: center; margin: 0px; font-weight: lighter; }
I'm coding my first site, and didn't realize how frustrating cross-browser compatibility would be. Here's my site: http://www.tommaxwell.me. It looks the way I want it to in Safari and Chrome (maybe because they're Webkit?), but in Opera and Firefox, the spacing between the first header and the tagline is way too much. I can't figure out how to fix this. I read something about CSS Reset's, but I'm not sure how to use it or exactly what it is.
CSS:
body {
background-image:url(209241_2453996366505_1946848896_o.gif);
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
padding:0;
margin:0;
}
#font-face {
font-family: 'klavika_rgregular';
src: url('klavika-regular-webfont.eot');
src: url('klavika-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('klavika-regular-webfont.woff') format('woff'),
url('klavika-regular-webfont.ttf') format('truetype'),
url('klavika-regular-webfont.svg#klavika_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'klavika_mediummedium';
src: url('klavikamedium-osf-webfont.eot');
src: url('klavikamedium-osf-webfont.eot?#iefix') format('embedded-opentype'),
url('klavikamedium-osf-webfont.woff') format('woff'),
url('klavikamedium-osf-webfont.ttf') format('truetype'),
url('klavikamedium-osf-webfont.svg#klavika_mediummedium') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
text-align: center;
margin-top: 10%;
font-family: klavika_mediummedium;
color:#FFFFFF;
font-size: 6.250em;
font-weight: 400;
}
p {
position: relative;
top:-8%;
text-align: center;
font-family: klavika_rgregular;
color:#FFFFFF;
font-size: 1.875em;
font-weight: 400;
}
ul {
position: relative;
list-style-type: none;
margin-top: 5%;
margin-left: 37%;
font-family: klavika_mediummedium;
}
ul li {
font-size: 2.500em;
font-weight: 400;
float: left;
padding-right: 3%;
}
You should use doctype(first line in html file).
For better CSS and cross-browser compatibility use reset:
http://meyerweb.com/eric/tools/css/reset/
Choose HTML5 Boilerplate as your default template, it comes with Normalize CSS which resets the default settings of all browsers.
HTML5 Boilerplate has comments on almost each line of CSS and HTML, these comments makes it more easy to use.
Your solution is in setting line-height: 30px; to h1 element because h1 has too large font-size so you have to adjust line-height
Just replace my p tag class into your css :-
CSS
p {
color: #FFFFFF;
font-family: klavika_rgregular;
font-size: 1.875em;
font-weight: 400;
margin: 0;
padding: 0;
text-align: center;
}
i am styling the tag twice in my css file. i need to use different style but both the styles are actually conflicting.
#cat_header h3 {
font-family: Arial, Helvetica, calibri;
font-size: 90px;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
text-align: left;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.lightbox .head h3{
font-family: Calibri, Helvetica, Arial;
font-size: 28px;
letter-spacing: -1px; word-spacing: -1px;
font-weight: bold;
color: #fff;
margin: 5px 0 0 8px;
}
You can't "purge" you can override by making the rule more specific
#content .lightbox .head h3 { }
Or use !important
.lightbox .head h3 { font-family:Calibri !important; }
When you specify styles by ID (with a #) as opposed to by class (with a .), the style rules from the ID override those from the class. You can see the whole precedence rules here: http://www.w3.org/TR/CSS2/cascade.html
Basically, you could just a third rule which is more specific than either of the two rules you have now.
I don't know what your document structure is, but here's an example bit of CSS which would be even more specific. I'm totally guessing as to what your document struture is, so your actual code will vary.
#cat_header.head h3{
color:red;
}