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; }
Related
The h1 font-size percentage isn't changing the text size according to the screen and just stays at 20px. Am I missing something?
html {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
h1 {
margin: 0;
font-size: 200%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 3px;
}
Try using this instead.
font-size:2em;
Ems are a more appropriate relative size unit for text. Also, without seeing your html structure, it's hard to know if there isn't some other element obstructing this font-size change.
I have a situation that I can't seem to figure out with CSS.
I have a sidebar category menu that I want to be a certain font.. but the other content when it is in the sidebar to be the standard font.
The issue is that the div structure looks like this.
...
<div class="col-left sidebar">
<div id"sidebar-nav" class"block sidebar-nav-left codnitiveSidenavLeft">
<div class="block-title">..</div>
<div class="block-content">
Now what happens is that block-content has a font value in css which is the normal font.. when it is not under the class "block sidebar-nav-left coditiveSidenameLeft" then that is fine.. when it is under the "block sidebar-nav-left coditiveSidenameLeft" class then I want to use a special font called destroyregular.. here is what I have in the css.
.block .block-content {
padding: 5%;
font-family: 'Lato',sans-serif;
/*font-family: "destroyregular";*/
font-size: 100%;
font: bold 12px Arial, sans-serif;
color: #FFFFFF;
text-transform: uppercase;
}
#sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft
{
padding: 5%;
font-family: "destroyregular" !important;
font-size: 100%;
/*font: bold 12px Arial, sans-serif;*/
color: #E6E6E6;
text-transform: uppercase;
}
While container class"block sidebar-nav-left coditiveSidenameLeft" does have the destroyregular font, it is overridden by the block-content.. how can I force the destroyregular font down to the block-content only if it is under it?
Thanks in advance..
--Corrected typo in div... side-nav was corrected to sidebar-nav sorry..
--Corrected typo #2!! arrgh.. #sidebar-nav.block.sidebar-nav-left codnitiveSidenavLeft
-Ken
Change the sidebar and .block-content to this:
#side-nav
{
padding: 5%;
font-family: "destroyregular", Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #E6E6E6;
text-transform: uppercase;
}
.block-content {
padding: 5%;
font-family: 'Lato', Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
}
This selector:
#sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft
Doesn't select anything in that HTML snippet you posted. The ID and class names don't match.
UPDATE: With the corrected selector, what's going on now is that the font destroyregular is getting applied with very high specificity to the .block, but .block-content will not inherit it over something set specifically for .block-content jsut because the parent has high specificity. This is how I would do it, same HTML and add this CSS:
#sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft .block-content {
font-family: "destroyregular";
}
This is not optimal. I think it's overspecified. And probably you can get rid of the font definition on the other (overspecified) selector and move it to that one, but that depends on what you actually need.
I'd like to use Sigil to change font family to embedded ones. I believe I've made everything right in CSS. I imported the "1984" font in Sigil.
I have read this tutorial: http://www.pigsgourdsandwikis.com/2011/04/embedding-fonts-in-epub-ipad-iphone-and.html and the sample works fine with ADE 3.0 but if I open it, don't edit the file and save, it wouldn't show the embedded files.
#font-face {
font-family: 1984, serif;
font-style: normal;
font-weight: normal;
src:url("../Fonts/1984.ttf");
}
.s8{
color: #000000;
font-family: "1984.ttf";
font-size: 125.5000%;
font-style: normal;
font-variant: normal;
font-weight: bold;
letter-spacing: 0.0000em;
margin-bottom: 0.0000%;
margin-top: 0.0000%;
padding-left: 0.0000%;
padding-right: 0.0000%;
text-align: left;
text-decoration: none;
text-indent: 0.0000%;
text-transform: none;
}
What could I do?
Thanks!
font-family: "1984.ttf"; looks like it should just be font-family: 1984;
Also note that zero values in CSS (i.e. 0.0000%;) can simply be replaced with 0
Currently Im using the below css for all of my text. However it is changing my form text on my blog (which I don't want it to do.) How can i set a new style for this blog-sidebar-form. I just want to center the text and make it bold, etc.
http://jeffreydowellphotography.com/blog/
p {
font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", ``"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 16px;
font-weight: 300;
max-width: 550px;
color: #4d4d4d;
text-align: left;
line-height: 175%;
letter-spacing: 1px;
word-spacing: 0px;
margin-top: 20px;
}
You should probable do something like this for the blog.
So you can overwrite the base style.
p {
font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", ``"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 16px;
font-weight: 300;
max-width: 550px;
color: #4d4d4d;
text-align: left;
line-height: 175%;
letter-spacing: 1px;
word-spacing: 0px;
margin-top: 20px;
}
p.blog {text-align: right/*and other code*/}
<p class="blog"> This paragraph will be right-aligned. </p>/*you should give all the p in your blog the blog element*/
Good luck with it.
Give the form a class, or if it is the only form, I think you can just put form. From there, I believe you can give a negation pseudo class:
:not(form){text-align:center; font-weight:bold; /*any other css you would like to enter. make sure you copy the entire line. this is a comment so you can delete it.*/}
Or maybe you could affect the inputs of the form:
form input{ text-align:center; font-weight:bold; }
I hope they work.
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;
}