All geek questions in one place

Font-family rule is ignored

I am currently updating the site for someone, and I am trying to get rid of the global @font-face and apply it only to certain elements.

It was defined as follows:

 @font-face { font-family: "neutra"; src: url( /styles/NeutraDisp-Bold.eot ); /* IE */ src: local("Neutra Display"), url( /styles/NeutraDisp-Bold.ttf ) format("truetype"); /* non-IE */ } @font-face { font-family: "futura"; src: url( /styles/FuturaStd-Heavy.eot ); /* IE */ src: local("Futura Std"), url( /styles/FuturaStd-Heavy.ttf ) format("truetype"); /* non-IE */ } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { font-family: neutra, Arial, Helvetica, Tahoma, Geneva, sans-serif; }

I only want it on a div that has the .header and legend class (and a few other tags, after all), so I changed the CSS to look like this:

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { font-family: Arial, Helvetica, Tahoma, Geneva, sans-serif; } @font-face { font-family: "neutra"; src: url('../../styles/NeutraDisp-Bold.eot'); /* IE */ src: local("Neutra Display"), url('../../styles/NeutraDisp-Bold.ttf') format("truetype"); /* non-IE */ } @font-face { font-family: "futura"; src: url('../../styles/FuturaStd-Heavy.eot'); /* IE */ src: local("Futura Std"), url('../../styles/FuturaStd-Heavy.ttf') format("truetype"); /* non-IE */ } legend{ font-family: neutra, Helvetica, Arial, sans-serif; letter-spacing: .125em; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; } .header{ width: 75em; height: 12.375em; background-color: #FFFFFF; margin: auto; font-family: neutra, Helvetica, Arial, Tahoma, Geneva, sans-serif; }

However .header font-family ignored. All other declarations in this rule are used, and Firebug shows a font-family , which indicates that it is really CSS.

In addition, the legend rule works fine and displays the correct font.

Note. I started moving fonts and other things when I started working, but I know that the new font paths are correct, because the legend rule works. I also tried "neutra" and 'neutra' .

A pastebin of all CSS is here if you think the problem is somewhere else. I also created jsfiddle with the font turned on to see an example of ignoring it.

The old Jsfiddle update does everything you need. I have no idea what is different in my own code.

Update

I added an insult rule. I think I'm missing something about rule weights, so there would be a lower rule not exceeding a higher one.

+6
source share
3 answers

This is a matter of priority. Check it out on w3:
http://www.w3.org/TR/CSS2/cascade.html

Your first rule, which sets a default value, like Arial, also directly applies the font to most html elements. This is optional and causes your problem. Rather, you should just install it once, on a top-level element such as html .

 /* this single rule applies the Arial font to the whole document tree under <html> */ html { font-face: Arial, etc; } /* this would set the font on .header, and everything inside of it */ .header { font-face: neutra, etc; }

In your case, p { font-face: Arial; } p { font-face: Arial; } and div { font-face: Arial; } div { font-face: Arial; } etc. beat your single-user .header rule. If you shorten this long rule to a top-level element, it will solve your problem.

A small css cascade example here, with the original long rule declaration:

 <html> <body> My text is Arial because I exist under html and there are no other rules modifying me. <div class="header"> My text is neutra because I'm a direct child text node of "header" <p> my text is Arial because of the rule on "p", which in turn overrides the rule on "header" </p> </div> </body> </html>
+4
source

For a quick check, you tried:

 .header, .header *{ font-family: neutra, Helvetica, Arial, Tahoma, Geneva, sans-serif; }

Since you are specifying a font family for a large number of tags, it is possible that the first setting is too strong.

+3
source

Is it likely that you are using the html5 <header> element and define the style for the element in your CSS as .header {} (class) instead of header {} ?

0
source

Source: https://habr.com/ru/post/895041/

More articles:


All Articles