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;
}
Related
#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
I've been struggling with an issue for days now. I have a webfont kit from fontsquirrel. IE9 won't load the fonts when I load the containing webpage in an iframe. Weirdly enough, when I load the page in the browser itself, it does work. No errors in F12 developer tools.
The code:
<style type="text/css">
html, body {
margin: 0;
padding: 0 0 1em 0;
width: 100%;
height: 100%;
/*overflow-x: hidden;
overflow-y: auto;*/
overflow: hidden;
position: relative;
}
#font-face {
font-family: 'bebas_neueregular';
src: url('build/img/BebasNeue-webfont.eot?');
src: url('build/img/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('build/img/BebasNeue-webfont.woff') format('woff'),
url('build/img/BebasNeue-webfont.ttf') format('truetype'),
url('build/img/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
I have a problem with my icomoon font in Chrome with that icons are sometimes not shown. I don't get the font-missing empty rectangle "fallback".
When I select the element with an icon it will appear, so a repaint will fix it. But forcing a repaint is a terrible solution...
The only solution I find regarding buggy iconfonts in Chrome is to use PUA codes, but I already do that.
My CSS for icons:
.icon-back-in-time-mirror:before {
content: "\e613";
}
.icon {
position: relative;
}
.icon:before {
position: absolute;
height: 22px;
margin: -11px 0 0;
top: 50%;
left: 0;
font-family: 'icomoon';
font-weight: 400;
line-height: 22px;
display: block;
speak: none;
}
The #font-face rules
#font-face {
font-family: 'icomoon';
src:url('/gui/css/fonts/icomoon.eot?-cpkbjx');
src:url('/gui/css/fonts/icomoon.eot?#iefix-cpkbjx') format('embedded-opentype'),
url('/gui/css/fonts/icomoon.woff?-cpkbjx') format('woff'),
url('/gui/css/fonts/icomoon.ttf?-cpkbjx') format('truetype'),
url('/gui/css/fonts/icomoon.svg?-cpkbjx#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
On my website I'm using a custom font which I have uploaded. It seems to be choosing when to work intermittently. It works on some computers/browsers, but not on others. It is also mapped correctly.
This is my code:
<style type="text/css">
#font-face {
font-family: 'AgencyFBRegular';
src: url('agencyr.eot');
src: url('agencyr.eot?#iefix') format('embedded-opentype'),
url('agencyr.woff') format('woff'),
url('AGENCYR.TTF') format('truetype'),
url('agencyr.svg#AgencyFBRegular') format('svg');
}
h3 { font-family: 'Agency FB', sans-serif; font-size: 26px; font-weight:normal; text-align: left; line-height: 100%;
border-bottom: 1px solid #484848; padding-bottom: 5px; margin-bottom:7px;
</style>
I thought it was working everywhere until I used a friend's laptop to view it.
Can you see where I'm going wrong?
UPDATE:
I have updated font CSS. It seems to be working, but now not on iOS.
The following code should work:
#font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.eot") /* EOT file for IE */
}
#font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.ttf") /* TTF file for CSS3 browsers */
}
h3 {
font-family:'Agency FB', sans-serif;
font-size: 26px;
font-weight:normal;
text-align: left;
line-height: 100%;
border-bottom: 1px solid #484848;
padding-bottom: 5px;
margin-bottom:7px;
}
You need change file name of your font without Uppercase. Like this: from AGENCYR.TTF to agencyr.ttf
and in your css file:
src: url('agencyr.ttf');
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; }