When I inspect element using Chrome Dev Tools the default font-size property is missing for the h4 tag. All the other tags like h1, h2, h3, h5, h6 are showing the font-size property.
See the screenshot
I have checked the default style sheet for HTML 4, here also the font-size property is missing.
Reference: http://www.w3.org/TR/CSS21/sample.html
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
What might me the valid reason for this behavior?
Thanks in advance.
The reason is that the designer of the browser’s style sheet wanted to make the default font size of h4 equal to 1em, i.e. the font size of its parent. This makes it fit to the scale of heading font sizes. When font-size is not set for an element at all, it inherits the size from its parent, so the result is the same as it would be with h4 { font-size: 1em }. (Not in all circumstances, but in these. The browser’s default style sheet is lowest in the cascade, so a relevant setting in any other style sheet will override it.)
Note that the sample style sheet for HTML 4 in the CSS 2.1 specification is outdated and contain some odd settings that were never implemented in browsers, and many settings have been tuned later. The Rendering section in HTML5 PR contains a much more modern description of typical (and more or less recommended) default settings in browsers. For clarity, it explicitly sets font-size: 1.00em; on h4.
Related
So I'm trying to change the font size of an h1 element and it is not changing. I used developer tools to see what is happening and this is what I found.
#media (min-width: 1200px)
.h1, h1 {
font-size: 2.5rem;
}
It said that the above was active and thus my h1 style in my css file was not kicking in. Does anyone know what this is?
The same happens when I try to change my font weight. Something like this is active and it is not allowing me to change the font weight.
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
color: var(--bs-heading-color);
}
Can anyone please help me here?
You can use !important to apply your changes. Just like this:
font-size: 3rem !important;
So, it gives priority to your styling and you will be able to change your font-size.
You have 2 Options :
Load your CSS/CSS files before these properties so that your element get the required properties.
You can use !important but it can cause issues in the future if you want to change the properties of these HTML tags again.
resizing the #media needs to be relative to some container. Add rem for line-height may provide container.
In my react app whereever i place h1 tag it just showing a normal font. On inspecting i found that my text is rendering as h1 but style of h1 is
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
I also tried to change this in my global.css
h1{
font-size: large;
font-weight: 900;
}
But it did not work. So how to render h1 as heading 1 text and font size
h1{
font-size: 80px;
font-weight: 900;
}
<h1>Example</h1>
It appears to be the problem of specificity. Your global.css rules are being overridden by more specific rules. And from the available information, I don't know what or where those rules are.
This will help you understand better: MDN CSS Specificity
I'm trying to get Jekyll to use two fonts, one for headings, and one for body text. To this end, I've copied the entire _sass folder to the root of my site, then changed \_sass\minima\_base.scss to include definitions for both fonts...
/**
* Basic styling
*/
body {
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
color: $text-color;
background-color: $background-color;
-webkit-text-size-adjust: 100%;
-webkit-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern" 1;
-o-font-feature-settings: "kern" 1;
font-feature-settings: "kern" 1;
font-kerning: normal;
display: flex;
min-height: 100vh;
flex-direction: column;
}
/**
* Set `margin-bottom` to maintain vertical rhythm
*/
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
font: $heading-font-weight #{$heading-font-size}/#{$heading-line-height} $heading-font-family;
margin-bottom: $spacing-unit / 2;
}
Then in \_sass\minimua.scss, I changed the styling for the base font, then added the heading font:
$base-font-family: serif, Times, "Times New Roman";
$base-font-size: 16px !default;
$base-font-weight: 400 !default;
$small-font-size: $base-font-size * 0.875 !default;
$base-line-height: 1.5 !default;
$heading-font-family: sans-serif, Helvetica, Arial;
$heading-font-size: 16px !default;
$heading-font-weight: 400 !default;
$heading-line-height: 1.5 !default;
I also created \_sass\my_overrides.scss which looks like this:
#charset "utf-8";
// Define defaults for each variable.
$base-font-family: serif, Times, "Times New Roman";
$heading-font-family: san-serif, Helvetica, Arial;
But as far as I can tell, the fonts are switched in their use (screenshot below). And I'm probably forgetting something because this whole process is so complex.
So my question is:
How do I get two fonts working with Jekyll, serif for body, san-serif for headings?
I suppose I could also ask if Jekyll has a dual-font facility built in and if not, why not? But perhaps that sounds belligerent? (It's not meant to.)
Screenshot showing switched fonts
You may be able to split your css to target each separately, like this:
h1, h2, h3, h4, h5, h6 {
font: $heading-font-weight #{$heading-font-size}/#{$heading-line-height} $heading-font-family;
margin-bottom: $spacing-unit / 2;
}
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
font: $base-font-weight #{$base-font-size}/#{$base-font-height} $$base-font-family;
margin-bottom: $spacing-unit / 2;
}
On this page, the heading is shown on a beige background, followed by a section with a grey background.
I would like to eliminate the space underneath the title, such that the bottom of the letters are at the point where the two sections meet. I expected this to be pretty simple, probably just a matter of removing some bottom padding or margin, but I cannot figure out what is causing this space to appear under the title.
try to change this class hero-h1 to this:
.hero-h1 {
font-size: 88px;
text-shadow: -1px -1px 0 #888888;
line-height: 68px;
}
if you decrease line-height you can delete space underneath
It's your line-height:
CSS:
.hero-h1{
line-height: 62px;
}
This is what looks best in Google Chrome and Firefox on OS X. Browsers and operating systems may vary. Also, people may have different system fonts. Consider using an image instead of you really want it to stay consistent across browsers.
Another thing to note. This is your current font selection:
h1, h2, h3, h4, h5, h6{
font-family: 'Montserrat',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
But Arial is a much MUCH more common font. For near pixel perfection and more consistency if you don't want to go with an image, to change it to this:
h1, h2, h3, h4, h5, h6{
font-family: Arial, 'Montserrat',"Helvetica Neue", "Helvetica", Helvetica, sans-serif;
}
Which would make your line-height this:
.hero-h1{
line-height: 60px;
}
Or you can add margin-bottom: -18px in hero-h1 class
Additionally to the answers about your line-height you can also simply change the .hero-h1 to a block, and then set it's height to match the line-height
.hero-h1 {
display: inline-block;
width: 100%;
height: 100px;
font-size: 88px;
text-shadow: -1px -1px 0 #888888;
line-height: 100px;
}
You can follow this method, so you do not have to play with negative margin or mind font-size of H1.
header's height is set from line-height , overflow:hidden to hide text-shadow overflowing..
h1 is set as display:inline-block and vertical-align:bottom. reset margin to 0
For the text inside h1, you need to set line-height down to 0.7-0.8em to swallow gap left for letters like j,q,y.
to size and tune your header, play with header line-height and h1 font-size.
So I've never seen this ever before and it has me stumped.
In chrome, my web fonts (served both from google and typekit) are not loading properly and when I look in my inspector at the CSS declarations for the fonts, it appears that there are random backslahes appearing in the actual font declaration that are essentially making them moot. I can't seem to reproduce the error in firefox or safari. Mostly wondering if anyone has ever seen this before/how did you deal with it?
Screenshot of the inspector is: https://www.dropbox.com/s/yafmnpzb5ve4mf9/Screenshot%202014-02-24%2016.02.12.png
And the site itself is bang-stage.dresgar.com
Any input would be great!!
The font declarations have the /s in the code.
I'm assuming this gargantuan css file is a compiled css file. The file that has the declarations in it (according to the code) is at:
/uploads/ultimatum/template_custom_2.css
the lines to fix look like:
h2, h3, h4, h5, h6, h2 a, h3 a, h4 a, h5 a, h6 a {
text-transform: uppercase;
font-family: \"alternate-gothic-no-1-d\", \"Francois One\", Verdana, Arial, sans-serif;
and
#menu-main-menu .sub-container .sub-menu .menu-item > a {
font-family: \"alternate-gothic-no-1-d\", \"Francois One\", Verdana, Arial, sans-serif;
I'm guessing that removing those slashes from the source should fix your problem.