CSS Selector based on font-weight? - html

Is it possible to create a selector that would identify elements with specific HTML font-weight properties?
Something like (fake example):
div[font-weight^='900']{
font-family:"HaasGrotDisp55Roman";
}
div[font-weight^='500']{
font-family:"HaasGrotDisp35Thin";
}
w/ font-face css definitions as:
#font-face {
font-family: 'HaasGrotDisp35Thin';
src: url('fonts/neuehaasgrotdisp-35thin.eot');
}
#font-face {
font-family: 'HaasGrotDisp55Roman';
src: url('fonts/neuehaasgrotdisp-55roman.eot');
}

You could do the following:
/* Your fonts */
#font-face {
font-family: 'HaasGrotDisp';
src: url('fonts/neuehaasgrotdisp-35thin.eot');
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'HaasGrotDisp';
src: url('fonts/neuehaasgrotdisp-55roman.eot');
font-weight: 900;
font-style: normal;
}
body { font-family: "HaasGrotDisp" }
h1,h2,h3 { font-weight: 900 }
This minifies it to only one font-family. Simply assign the different weights inside your #font-faces
And as for your attribute like query: I would suggest using semantic classes to use it with divs.

Nope. Add classes to elements so that you can apply certain font-weight's to those elements. Use those same classes for to "identify" elements that have a certain font-weight. That's how CSS works.

as far as I know, css selector will work on element name or attributes, but not css. besides, even if it were possible, it would be strongly discouraged to do so. instead you can define class for each font face, and apply class to approriate div's, and search div's with those classes.
eg)
`
.Haas {
font-family: '...';
}
.Neue {
font-family: '...';
}
...
<div class="some_class Haas">....
`

Related

#font-face - Using multiple files for one font

It seems this question has been asked numerous time already (such as here). But my issue does not seem to be resolved with the answers provided.
I am attempting to use multiple files for a single font. Each file is for a different style - italics, bold. I have attempted the following:
#font-face {
font-family: matrix;
src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}
#font-face {
font-family: matrix;
font-weight: bold;
src: url('../fonts/chris-simpkins_hack/Hack-Bold.ttf');
}
My HTML contains the following:
<h1>Some Text</h1>
<p><b>Some more text that is bold!</b></p>
Unexpectedly, all the text outputted on the page is using the "...bold.tff" file. Why is this?
I have been able to achieve this easily and quickly in the past and am unsure as to what is different this time.
By browser default, h1 use bold text. See W3School for details.
Simply add h1{ font-weight: normal;} to reset this.
If you don't like the default css by browser, you can use some reset.css or normalize.css.
But, normalize.css treat h1 as bold text, too.
create different classes with font face and assign those classes to expected tags
#font-face {
font-family: matrix;
src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}
.myh1 {
font-family : matrix;
font-weight : 400;
}
.myp {
font-family: matrix;
font-weight:700;
}
example
<h1 class='myh1'>Some Text</h1>
<p class='myp' >Some more text that is bold!</p>
Maybe you must use <em></em> tags for styling because is deprecated in HTML4
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
Or you try change font-weight: bold; to font-weight: 700; and add this style
b { font-weight: 700; }
try this:
#font-face { font-family: 'BrushScriptStdMedium';
src: url('brushscriptstd.eot');
src: local('Brush Script Std'), local('BrushScriptStd'), url('brushscriptstd.woff')
format('woff'), url('brushscriptstd.ttf') format('truetype');}
.classname{ font:21px bold italic Arial;}

How to use inline webfont in css?

I am using webfont in my website, sometimes font which i desired is not applied to text, In order to overcome that i want to load font while building CSSOM it self, so I tried this
body style="font-family: 'customfont'; src: url('XXXX/custom-font.woff2')"
I tried this also
body style="font-family: 'customfont';
But of no use.
You should use font-face inside style tag It might work and it's pretty fast and clean (Put it in head )
<style>
#font-face{
font-family:custom1;
src:url(XXX/fonts/XYZ.ttf);
}
</style>
then use like `style="font-family: 'custom1';
I hope It would be HelpFull
#font-face {
font-family: myFont;
src: url('XXXX/custom-font.woff2');
}
div {
font-family: myFont;
}
Try to #font-face Rule
For inline use in HTML:
<style>
#font-face{
font-family: fontname;
src: url(fontdirectory);
}
</style>
Otherwise, put this in your CSS:
#font-face {
font-family: fontname;
src: url(fontdirectory);
}
Then apply the font to the elements you want.

The right way to include multiple fonts in css

I don't a simple moment. Which way is the right way to include multiple fonts in css? Here are simple examples.
This?
#font-face {
font-family: DeliciousRomanRegular;
src: url(/Delicious-Roman-R.otf);
}
#font-face {
font-family: DeliciousRomanBold;
src: url(/Delicious-Roman-B.otf);
}
or this?
#font-face {
font-family: Roman;
src: url(/Delicious-Roman-R.otf);
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: Roman;
src: url(/Delicious-Roman-B.otf);
font-style: normal;
font-weight: bold;
}
And why?
I use the second one, because I can add font-family to BODY and just add font-style or font-weight to other classes. And it works.
But I saw people using the first method many times. But it seems to me too rude.
Every time you need to add bold to a class you have to use "font-family: DeliciousRomanRegular, Arial, sans-serif;". WTF?
The second option: you use the same font name, but for each variant you intend to use, you need to specify (a) the variation and (b) the alternate resource to use as font.
This ensures that in your actual content CSS you can do things like:
p {
font-family: Roman;
font-style: regular;
font-weight: 400;
}
p em {
font-style: italic;
}
p strong {
font-weight: 800;
}
And things will work correctly. Contrast this to the ridiculous notion of "changing the font family just because you wanted the same font, but italic". Let's not do that.

How do I change my list item style with a foundation icon?

I've downloaded a set of foundation icons but I'm having a hard time finding documentation on how to use this icons in my css code.
I know I can use it in my markup as so:
<i class="fi-check"></i>
but I want to include it in my css file
#import url("foundation-icons/foundation-icons.css");
and start using them here. for example I want to change all the list item styles to be checkmarks. Basically what I want is:
.myClass li { list-style: fi-check; }
Is it possible to do this somehow?
It would be easiest to use them in your markup as you've pointed out.
<i class="fi-check"></i>
However if you want to recreate this for your own custom style you'd have to recreate/change the css rules found in foundation-icons.css
First you'd need to pull in the #font-face:
#font-face {
font-family: "foundation-icons";
src: url("foundation-icons.eot");
src: url("foundation-icons.eot?#iefix") format("embedded-opentype"),
url("foundation-icons.woff") format("woff"),
url("foundation-icons.ttf") format("truetype"),
url("foundation-icons.svg#fontcustom") format("svg");
font-weight: normal;
font-style: normal;
}
Then you'll need to add it to your custom css like so:
.myClass li:before {
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
display: inline-block;
text-decoration: inherit;
content: "\f126";
}
The last line references the check icon in the foundation-icons file. So, if you wanted to change the icon to something else you'd need to look through foundation-icons.css to see what code to put into the content section.
For example:
trash = content: "\f204";
stop = content: "\f1ef";
Hope this makes sense!

How to give different font for all bolded text in html?

I don't think there is an easy way to do this, and it looks like a shortcoming in CSS to me.
Anyway here is the problem:
I want to use a different font for all the bold text in my web page.
For example, take look at the following markup:
<span>Hello</span> <strong>world</strong>
and the CSS:
span { font-weight: bold }
Now is there an easy or recommended way to get both the bolded words (the one using the tag and the one using the css rule) to be using a different font?
Something like:
*[font-weight:bold] { font-family: 'Comic Sans'}
Edit:
What I want is to have a global option of setting font for all bolded text in the page. Given that normally CSS files tend to get bigger in size over time, giving a special class for all places where bold text is used is not a feasible solution.
It involves a little lying, but this seems to work in Firefox 13, Chrome Latest, Opera 11.64, and even IE9:
<h1>This is Bold!</h1>
<p>This is <span id="bold">text</span> that is <strong>bolded</strong>.</p>
<p>Something <span style="font-style: italic;">here</span> is <i>Italicized</i>!</p>
#font-face {
font-family: 'Merriweather';
font-weight: regular;
src: local('Unkempt'), url('http://themes.googleusercontent.com/static/fonts/unkempt/v4/MsFMwD9wD1OCzqw3trD0PA.woff') format('woff');
}
#font-face {
font-family: 'Merriweather';
font-weight: bold;
src: local('Merriweather Bold'), local('Merriweather-Bold'), url('http://themes.googleusercontent.com/static/fonts/merriweather/v4/ZvcMqxEwPfh2qDWBPxn6nnl4twXkwp3_u9ZoePkT564.woff') format('woff');
}
#font-face {
font-family: 'Merriweather';
font-style: italic;
src: local('Cousine Bold Italic'), local('Cousine-BoldItalic'), url('http://themes.googleusercontent.com/static/fonts/cousine/v4/y_AZ5Sz-FwL1lux2xLSTZXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
* {
font-family: 'Merriweather', serif;
}
strong, #bold {
font-weight: bold;
}
http://jsfiddle.net/userdude/vF9Qr/4
It’s a design feature, not a shortcoming, of CSS that properties work independently of each other, except where otherwise indicated in CSS specifications. There is no way to couple two properties together. Even if you set them in the same rule, as in .foo { font-weight: bold; font-family: Awkward }, they act independently (and either of them, or both, could be overridden by other style sheet rules).
So you just have to design your use of markup and CSS so that that uses a specific font for all bold text, if that’s what you want. (It’s typographically very questionable and makes me wonder what design error caused that assumed need.) Note that in general browser style sheets can bold whatever they want to, and they typically want to bold heading elements and th elements, among others. So if you wanted to prevent anything from getting bolded except on your command, you would start with * { font-weight: normal; }.
In your code all the span are bold why you don't just change the font-family of the span tag ?
change your html to
<span>Hello <strong>world</strong></span>
and your css to
span {font-weight:bold;}
strong {font-family:'Comic Sans';}
You can also use the strong tag, it the perfect tag to use bold text.
http://www.w3.org/wiki/HTML/Elements/strong
Add a class to the span (Bold), not a style, and just do this:
span.Bold { font-weight: bold }
strong, span.Bold { font-family: 'Comic Sans' }
I don't see the problem here? Since the emboldened text will be contained either within a b or strong element (depending on your markup), you can simply target that with a font-family rule?