How can I apply different styles by the result of computed styles?
This can be done via JavaScript, but I'm finding a CSS only solution.
e.g.
body { font-family: Helvetica, Arial, Segoe UI; }
In above case, I would like to apply letter-spacing: -0.5px only for Arial, not others.
Use this attr:
https://www.w3.org/International/questions/qa-css-lang.en
(I guess CSS can't figure out text's fonts types.
You need to use scss(sass) or JS.)
:lang(ta) {
font-family: Latha, "Tamil MN", serif;
font-size: 120%;
}
Related
So I'm looking at this Google font called Roboto
https://fonts.google.com/specimen/Roboto?selection.family=Roboto
It comes in different styles such as light, regular, medium, etc.
The site says to import you can do
#import url('https://fonts.googleapis.com/css?family=Roboto');
and then in your style sheet you can do:
font-family: 'Roboto', sans-serif;
Well, thats fine, but I need a mixture of them. Such as light, and regular, not just one.
So I can do
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
and this selects them all.
But it still says in the style sheet you can do:
font-family: 'Roboto', sans-serif
If you do that, then it just sticks to the first one. I need one style to be 300, one to 400, one to be 500. So how do I specify which one in the css?
I've tried doing
font-family: 'Roboto:300', sans-serif
and
font-family: 'Roboto 300', sans-serif
and
font-family: 'Roboto-300', sans-serif
but none of them worked. Can anyone help?
Use the font-weight property
http://www.w3schools.com/cssref/pr_font_weight.asp
Example:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
What i recommend is have a class that defines the font to be used
i.e after importing the google font, in your css add:
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,600');
.robotoriser{
font-family: 'Roboto', sans-serif;
font-weight: Normal; /* This is just so when ever you call use this class, it uses the normal font weight by default */
}
.rbt-300{ /* you can also name this rbt-light or whatever you like*/
font-weight:300;
}
.rbt-400{
font-weight:400;
}
.rbt-600{
font-weight:600;
}
... and so on.
Then use in html like this
<p class="robotoriser rbt-300" >This is light text</p>
<p class="robotoriser rbt-400" >This is medium text</p>
<p class="robotoriser rbt-600" >This is heavy text</p>
Here is a fiddle to a working demo
Note you can also use it in any class you have
e.g
.some_element{
font-family: 'Roboto', sans-serif;
font-weight: 300; /* Or any of the font weight values you included via the Google font url */
}
<p class="some_element"> Dragons are goats that can fly :D </p>
I'm referring to the documentation here:
sass docs
and trying to see if its possible to use an if statement to apply a letter spacing attribute to each class that uses a certain font family.
I've tried
h1 {
#if font-family == 'Open Sans Condensed' {letter-spacing: 0.1em;}
}
h1 {
font-family: 'Open Sans Condensed', sans-serif;
}
with the hope of outputting:
h1 {
font-family: 'Open Sans Condensed';
letter-spacing: 0.1em;
}
which doesn't work. i'm pretty sure that I'm approaching this problem from the wrong angle. Can anybody verify if this kind of usage is possible?
Two ways you could approach this:
1) Include the letter-spacing as part of the font-face definition.
#font-face {
font-family: 'Open Sans';
src: [urls for various formats go here];
letter-spacing: 0.1em;
}
If you're loading the font in from an external stylesheet, like with google fonts or similar, you should still be able to declare a second font-face block that just includes the font-family and letter-spacing rules.
2) Use a sass mixin. You can make it very simple or more flexible, depending on whether you want to account for multiple fonts.
Basic one-font setup:
#mixin font-styles() {
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 0.1em;
}
h1 {
#include font-styles;
}
Or parameterized for multiple font styles:
#mixin font-styles($font: 'headings') {
#if $font == 'headings' {
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 0.1em;
}
#elseif $font == 'text' {
font-family: 'Open Sans', sans-serif;
[related font styles go here]
}
[add more font style sets as needed]
}
h1 { #include font-styles('headings'); }
p { #include font-styles('text'); }
We have many sites with their own font families. I need to add a font to the end of the font family on every site. Is it possible to extend a font family?
p.test {
font-family: Arial, Helvetica;
}
p.test {
font-family: Calibri;
}
The above block sets the font-family to Calibri. I would like it to set the font-family to Arial, Helvetica, Calibri. Something like the below is what I'm looking for:
p.test {
font-family: Arial, Helvetica;
}
p.test {
font-family: += Calibri;
}
Any ideas?
Simply repeat all fonts, like so:
p.test {
font-family: Arial, Helvetica, Calibri, sans-serif;
}
sans-serif is a generic expression that will use any available font on the users system without serifs, so it only makes sense to put it last.
UPDATE:
if the original style has an inherit at the end you may add fonts to the parent elements:
p.test {
font-family: Arial, Helvetica, inherit;
}
div.p-parent {
font-family: Calibri;
}
If the last font in the line is sans-serif, thats what you're gonna get, if you choose not to overwrite it and repeat the other fonts.
Cant understand your question. 'sans-serif' will always fall back to the default sans-serif font on the user's machine. In your case, Calibri will always be ignored...
Is it possible to overwrite variables in SCSS for print?
I've some variables:
$baseFontSize : 12px;
$defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$defaultSerif : Times, "Times New Roman", serif;
I want to overwrite it for print for example
$baseFontSize : 10pt;
$defaultSansSerif: "Courier New", Courier, monospace;
$defaultSerif : Georgia, Serif;
In font family case we may create different variable $defaultPrintSansSerif and define css again for print. Because font-family might be use in 2 - 3 places in my all CSS. But in case of font-size. It's not possible to declare every class again in print css.
So i'm look for any way to overwrite my $baseFontSize from 12px to 10pt, or whatever size for print is. So font size in my CSS for print will change automatically.
ie.
Calculation SCREEN CSS PRINT CSS
$baseFontSize 12px 10pt
$baseFontSize * 2 24px 20pt
$baseFontSize * 3/2 18px 15pt
I don't see any problem.
Say you have a base/_variables.scss:
$baseFontSize : 12px;
$defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$defaultSerif : Times, "Times New Roman", serif;
$headerBackground: red;
$someOtherStuff : foo;
You begin your screen.scss with:
#import "base/_variables.scss";
And your print.scss with:
#import "base/_variables.scss";
$baseFontSize : 10pt;
$defaultSansSerif: "Courier New", Courier, monospace;
$defaultSerif : Georgia, Serif;
If your problem is that you have your screen styles included in your print stylesheet, there's not much you can do. You either have go through the nuisance of redeclaring all that require modification or separate the screen and print styles (which also requires writing styles again).
But as for the font-size, there's actually a workaround.
It is a good practice to define font-size absolutely for the html element and relatively for the rest, e. g.:
/* Enabling inheritance of everything */
#import "compass/reset";
html {
font-size: 16px; }
html * {
font-size: 1em; }
h1 {
font-size: 2.75em; }
If you follow this pattern, all you need to resize all the fonts on your website is to change the font-size of the html element!
I need a solution.. I am using google fonts on my website, but it is not working in safari, how can I tell the browser to use a different style when the font is not working? Here is my css code:
#import url(http://fonts.googleapis.com/css?family=Pontano+Sans);
h2{
font-family: 'Pontano Sans', sans-serif;
font-size: 15px;
text-transform: uppercase;
}
I just want to have another css rule like this, but without it overriding the above rule:
h2{
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 12px;
}
you should use the web-fonts loader capabilities to handle scenarios where fonts are not loaded.
that way, you can specify different styles based on the load state (active / inactive / loading).
see the web-fonts loader reference on loading states (and on github).