I have an admin panel that my users are creating the content.
It has an editor where they can select font size like
<span style="font-size: x-small;">text</span>
What I want to achieve is to override the font style while getting the data from the db.
Any ideas?
CSS:
span {
font-size: 12px !important;
}
You need the css style rule "font-family" so:
<span style="font-size: x-small; font-family: Verdana, sans-serif">text</span>
It's important to keep in mind that browser will apply first font is available, so in this case first Verdana, if there's not it will chose default "sans-serif" font.
font-family it's css equivalent of html "font-face" attrib.
Related
I'm working in a project where font families are defined inline style with weighting detail built into them, like font-family: Inter_700Bold
Is there a way to alias that in css/html where font-family: Inter_700Bold becomes font-family: Inter,font-weight:700
One possible solution could be to have a selector that targets elements by the inline style you mention, and apply the weight/actual font to them.
[style*="font-family: Inter_700Bold"] {
font-family: 'Inter_700';
font-weight: 700;
}
<p style="font-family: Inter_700Bold;">has the font family</p>
<p style="text-transform: capitalize; font-family: Inter_700Bold;">has other styles as well</p>
<p>doesn't have the font family</p>
You can't use some sort of dynamic aliases in html/css, you gonna need some kind of preprocessor for that.
But while defining a #font-face, you define a local page alias for the font:
#font-face {
font-family: 'this_font_will_be_used_through_this_long_ugly_name';
...
}
.some_element{
font-family: this_font_will_be_used_through_this_long_ugly_name;
}
Sure you will need all possible combinations defined as such the #font-face definitions.
I'm using custom fonts in WordPress. I do it by defining font family. I'm having problem if line spacing with One if my fonts. If I use line-height code in my custom css I'd theme, it's applied to all the fonts which isn't required. I just want to change line spacing of problematic font. Can we define line spacing for a font while defining its font family?
Best Regards
You can implement font-family with line-height in one class. I mean something like this:
HTML:
<div class="lato-font">Text</div>
<div class="monospace-font">Text</div>
CSS:
.lato-font {
font-family: Lato, sans-serif;
line-height: 1.6;
}
.monospace-font {
font-family: monospace, serif;
line-height: 1.6;
}
In this case you can set custom line-height for each font.
You'll have to define line-height for each element or class that uses the custom font.
h1,h2,h3,h4,h5,h6,.lead-text,.some-other-class,li {
font-family: ######;
line-height: 20px;
}
I am trying to style some html while excluding certain tags. For example, below I have a html which styles 2 pieces of text with different fonts:
<span style="font-family: Tahoma, Arial, sans-serif">Test 1</span>
<span style="font-family: Verdana, Arial, Helvetica, sans-serif">Test 2</span>
<span style="font-family: Arial, Helvetica, sans-serif">Test 3</span>
I would like to override the style of the spans which are not Arial font to be Times New Roman and I have tried the following css:
span {
font-family: "Times New Roman" !important;
font-weight: normal !important;
font-size: 12pt !important;
font-size-adjust: none !important;
font-stretch: normal !important;
font-variant: normal !important;
font-style: normal !important;
background-color: white !important;
}
The above also changes the style of the Arial text and I would like to exclude the Arial text being styled.
Note that the css is used to style multiple source html and the source html could have more tags in the style, defining the size of text, weight and so on, so the content of the style tag is not predictable.
How do I tell the css to exclude the tags which are styled as Arial font.
I also open the html in Microsoft Word to print the html, so this needs to work using Word as well.
There is no simple way to do that in general, but if the HTML tags are used very consistently, you could set up a style sheet using rules like
*[style="font-family: Tahoma, Arial, sans-serif"],
*[style="font-family: Verdana, Arial, Helvetica, sans-serif"] {
font-family: Times New Roman;
}
But you write that “content of the style tag is not predictable” (apparently referring to style attributes). If this is really so, the answer is “No.”
I wonder what the idea behind this is. If there ever was any point in using Tahoma or Verdana, why would Times New Roman be a suitable replacement for them, but not for Arial? And what should happen in systems that lack a font named Tahoma? Should they get Arial, or Times New Roman?
font Family not working with Ajax HTML Editor.. i mean i wan to apply font tahoma in htmleditor as a default. it should show content with font tahoma default.
and also i want to know for alternate of this html editor.. i just want textarea which can read HTML nothing else..
Plz Help
thankss in advance
You can use CSS to style a textarea the same as any other element:
textarea {
font: 0.9em/1.1em Tahoma, Geneva, Verdana, sans-serif;
color: #333333;
}
I have a client who wants bigger text in an <input> box. I would prefer to not have to make custom graphic button for this as it's on a really resource-constrained embedded system.
The input tag can be styled just like any other element in HTML, including padding, borders, text font face/size, etc.
input{
font: sans-serif italic 20pt bold;
border: 2px black solid;
}
Or what ever you would like.
Simply specify the font-size you want for the element:
input {
font-family: tahoma, verdana, sans-serif;
font-size: 1.1em;
}
I have used a relative size (em), so the ratio will keep if a user has a larger font size defined in the browser.
not only should you increase the font-size, you may also have to increase the height and line-height properties if the input element doesn't scale with the text (depending on how your styles were set). Also, be sure to check across all browsers, as forms can be very finicky.
Yep, it is possible and also simple to do!
HTML:
<input type="text" class="example_input" name="example_input" />
And the CSS:
.example_input{
font: Arial, Helvetica, sans-serif 20px bold;
border: 1px black solid; //optional
}
Hope it helped!
EDIT: Example on jsFiddle