In a nutshell, there's a global stylesheet:
a { font-family: Arial; }
I want to use a different font family for a particular link:
...
or
<span style="font-family: Helvetica;">...</span>
but nothing works. Is there an easy way to do this?
P.S. I'm dynamically (via PHP) assign different fonts to different links, so creating a special class is not an option.
Unless you have a specific font named Helvetica, you should realise that on some platforms (such as Windows, via FontSubstitutes), Helvetica is aliased to Arial. That might be the source of the problem. Try another font and see.
Your first attempt
...
should have worked. Agree that you're probably missing a font. Inline styles have precedence over any other styles beside a user-defined style sheet. Here's the order of priorities for style definitions:
User defined style
Embedded or inline style sheet
Internal style sheet
External style sheet
Browser default style
Within a style sheet the priorities are as follows:
Anything marked !important
id
.class
element
In addition, you have the rule of greater specificity: div a overrides a.
Here's a good article with more detail on the subject.
#Kip's suggestion is your best bet.
What you've written should work, unless the problem is what Chris pointed out,
When you get a pair of fonts for which this works correctly, you might consider that a better way of doing this would be to declare a class for the special links that somehow reminds yourself of why they need a separate font (maybe because you want them to be especially noticed?)
a { font-family: Arial; }
a .noticed { font-family: Helvetica; }
Then in HTML:
<a class="noticed" href="...">...</a>
Changing the font by creating a span tag around the link, or adding inline style to the link just smacks of the old days of <font> tags.
element styles override global styles, so Chris Jester-Young is probably right and you don't actually have a Helvetica font; try a different font e.g. Courier or Times New Roman that you're certain exists
Related
My Problem:
We offer full customization for our site to our customers (so they can make out app look like the rest of there site). They provide us a HTML "surround" page, which our main app is rendered into (no iFrame, the HTML of our app is string.replaced() server side essentially). They can include any JS and CSS links to style this "surround" page.
The problem is, they often include their main CSS file for there full website (totally unnecessary, but easiest method to make there part look right), which includes lots of generic rules. Our app then obviously then obeys these rules, and it breaks a lot of our default styles. Specific example, they have a 'h3' rule which sets text-transform and font-family
h3 {
text-transform: uppercase;
font-family: 'Fjalla One',sans-serif;
}
In our own CSS, we set a the font-family of a class that is applied to the h3 tag, but not the text-transform property. As such, our CSS changes the font-family, but we inherit the text-transform.
Is there any way I can tell the browser to "start again" with applying CSS from a given element? I know its very un-Cascading, but I need the users CSS to stop cascading past our apps first element, and then apply our CSS to that element and its children. I hope i've explained myself clearly.
Option 1:
Give them a class like remove-all-styles
.remove-all-styles {
all: revert;
}
Then write your css code below this css code and make sure your css has higher priority than their css file.
What is the order of loading the CSS files in a HTML page?
Option 2:
Give initial or auto values to all elements in css then write your css code below
https://www.w3schools.com/cssref/css_default_values.asp
I have noticed that in case of <button> tags, font-family is not inherited automatically; either I must specify it explicitly like:
<button style="font-family: some_style;">Button</button>
or use inherit property like this:
<button style="font-family: inherit;">Button</button>
However, the font-family is automatically inherited in case of other tags, the <a> tag for example.
Why do we have this issue with the <button> tags?
Here's a DEMO.
Form elements don't inherit font settings, you have to set these properties manually.
If you use font declaration for eg. body,
body {font-family: arial, sans-serif}
use just
body, input, textarea, button {font-family: arial, sans-serif}
or
input, textarea, button {font-family: inherit}
If you inspect your demo in a browser using its Developer Tools, you can see that the font family of the button element comes from the browser style sheet. They show this in different ways, and they may use different fonts there, but the principle is the same: there is a declaration for the font-family property of the element in some style sheet, hence that property cannot be inherited (unless you explicitly set the value inherit on it, of course).
This is not defined in specifications, but neither are such browser style sheet settings prohibited by them, and they are common practice.
I know this is an old question, and I am answering late. Both #panther and #jukka-k-korpela answer the question correctly. However, they are missing one key information about the fix for the precise question and the demo provided by #nikunj-madhogaria. I attempt to complete the answer according to the question.
Since the question is about the button tag, it is probably wise to add button to the CSS fix provided by #panther. So, here is the correct fix for the button tag:
button { font-family: inherit }
Old reply but it might help some people. I added the following:
* {
font-family: arial, sans-serif
}
I'd like to force all text on one of my systems to be displayed with one font type. However, folks frequently paste in text that has inline styles with all sorts of different formatting.
Could I override an element's inline style in my stylesheet? '!important' isn't enough for this!
You can override inline styles using CSS code that assigns font family to all relevant elements using the !important specifier, e.g.
* { font-family: Calibri !important; }
It is not sufficient to set the font e.g. just on the body element, since then inner elements have their fonts controlled by rules applicable to them. Inner elements inherit font from their parent only if no CSS rule sets the font on the inner element.
If someone is able to inject an inline style that has !important, then you cannot beat that in CSS. You would need to manipulate the document with JavaScript, removing or changing the style attribute.
Inline styles rule supreme.
You can do this, but you'll need to do it using JavaScript. The code would have to basically remove all of the inline style statements from the pasted code. This is a good idea anyway, you never know what people will paste-in.
Using jQuery:
$('.wrapper *').removeAttr('style');
...where your content is within a div with a class of "wrapper"
You do not need JavaScript for this. Despite what you say, !important is indeed enough.
Test case: http://jsfiddle.net/jezen/Z4rnv/
Explanation: CSS rules are chosen based on a level of specifity, which is calculated by the layout engine. The !important rule isn't an all-overbearing modifier; it simply adds extra weight to the respective rule in the specificity heirarchy.
Using the jQuery remove attribute function should do the trick.
removeAttr( 'style' );
I wasn't happy with the non specific nature of the other two answers.
* { font-family: Calibri !important; }
Won't always work sometimes you need to be more specific such as when dealing with spans
span { font-family: Calibri !important; }
Is specific enough because though you are adding important to the value.
Also the type of font styling matters, if the initial font styling was just using a font such as font-family and font-size are more specific already so using
span { font:15px arial,sans-serif; !important; }
would not override an inline style of
<span style="font-family: Calibri">Hello World</span>
i am trying to injecting font styles for web pages on a web browser.
to change every element of the page.
* {
font-size: 100%;
font-family: Arial!important;
}
in this question almost done the trick but this style get overridden. i want to prevent those overrides too. use of javascript to the solution is also ok.
If it got overridden, make sure it is the last thing in your style sheet (or the last stylesheet you include). The "Cascading" in CSS means that last definition wins.
Add !important to the font-size declaration, too:
* {
font-size: 100% !important;
font-family: Arial !important;
}
If you are using this in a user style sheet (as the words “trying to injecting font styles for web pages on a web browser” suggest), then your rule cannot be overridden.
If, on the other hand, this is just part of an author style sheet, then it can be overridden by a user style sheet, and there is nothing you can do about it. It will not be overridden by a browser default style sheet, as they don’t use !important. With respect to other author style sheets, the cascade rules imply that you cannot be overridden except by a rule that uses !important, too.
In a fight between author style sheet rules that both have !important, the more specific wins, with specificity exactly defined by CSS specifications. Between equally specific settings, the one that comes latest wins.
The selector * has the lowest possible specificity 0,0,0,0. For any selector, you can always construct another selector with a higher specificity. However, a CSS rule inside a style attribute for an element is considered as having the highest specificity.
So if you know which other CSS rules will be used, you can beat them by adding selectors with a higher specificity in your selector list.
I am developing a simple page with a form.
When I put a input text in the page, the characters that appear inside the input element have the browser default values, in chrome using the developers tools I can see that the font defaults to "webkit-small-control". But one of the fields that will appear in the page will be just a span field with data like this
<td>
<span id="readOnlyField">data</span>
</td>
When I render the page the data inside the span field is not equal to the data inside the input text field. My question is, how can I know the fonts and colors that the browser is applying to the input text field ? I can not use the value "webkit-small-control" because will not work in another browser.
I have only noticed this in Safari on a Mac. In order to make everything display the content as expected you need to override Safaris user agent stylesheet:
font: -webkit-small-control;
can be overridden using this in your reset.css:
button, input, textarea, select, isindex, datagrid {
font: inherit;
}
I cannot seem to find this in any reset.css but it done the trick for me.
In general, you can't know those values, because the defaults vary across browsers. Also, a user can set things like the default font family and style and hyperlink colors.
It is a good practice to use a "CSS reset" stylesheet to override browser defaults with your own "base" styles. There are lots of CSS reset examples on the web, for example the HTML5 Doctor's one or Eric Meyer's one. While your question is only about font style, resetting also other styles prevents many headaches in the long run.
There is no way to know for sure what default font-size the browser will choose.
You should instead reset the CSS (with Normalize for example) and further style your pages, for example:
span.some-class {
font-size: 12px;
color: #333;
}
And then your HTML:
<span class="some-class" id="readOnlyField">data</span>
that is the reason you should reset all the styles at first or use some established css framework like blueprint and avoid reinventing the wheel.
You should probably be overriding any style that you want in your css to aovid browser defaults
The default color for all major browsers for fonts is #000 but you can set it to whatever you want. The font you can set to whatever you want as long as it's on the system viewing it. Those defaults can be found by Googling.
There’s no known way you could find out, on your page, which font the browser uses by default. Neither can you specify in CSS that the browser render a span element using whatever font it uses by default for an input element.
But you can make text in span and input elements look the same (with the usual CSS Caveats, of course) by explicitly setting their font-family and font-size, e.g.
input, span { font: 100% Arial, sans-serif; }
In theory, you might need to set other properties too (there is no law against a browser displaying input element contents in blinking purple underlined by default), but this should take care of things in practice. Note that font size setting is needed, because browsers generally use reduced font size (about 90%) for input boxes.
If you are willing to use javascript, you can use getComputedStyle to find this data (check out Mozilla Developer Network).
For old IE browsers, you would need to use the currentStyle property (check out Quirksmode).
To copy ALL styles from one element to another, you could do something like this (I have simplified this to support modern browsers only):
var spanElement = document.querySelector('#mySpanElement');
var inputElement = document.querySelector('#myInputElement');
var styles = getComputedStyle(inputElement);
for (var name in styles) {
spanElement.style[name] = styles[name];
}
You will probably find you want to filter them, or only take a few ones you really want.
It is a behavior of WebKit.
See https://bugs.webkit.org/show_bug.cgi?id=50092
For a solution see: http://sijobling.com/tips/css-fix-for-html5-search-in-webkit/