Why does input get Ubuntu font instead of monospace font in this sample?
It is a tiny sample from some HTML code where the inputs are nested much deeper – but has the same effect.
Is there a general rule for what elements I have to specifically set font-family or inherit it? Input, label, button, …
Is it a bad idea to use something like this?
body * { font-family: xxx; }
What I want to do is set a "global font" and optionally set other font-families on elements where that is desired. Thought that was achieved by setting it on html, body { }. Obviously not.
Sample code:
html, body {
font-family: monospace;
}
.inp {
font-family: monospace;
/* or alternatively
font-family: inherit;
*/
}
<p>Some text</p>
<input type="text" value="123456789.0" /><br />
<input type="text" value="123456789.0" class="inp" />
Result (picture):
The result looks like this in Fire Fox on Ubuntu:
I'll add some pictures from Inspector in developer tools.
I was only looking at the rules section of the tools at first and as it say monospace I did not find the fault until I looked at computed ;)
From «Computed» on left and «Rules» on right:
<body> has focus:
<p> has focus:
First <input> has focus:
Second <input> has focus:
Most HTML elements aren't assigned a font-family by the browser's user-agent style sheet, so they will inherit whatever you set on the body element.
Some elements, however, do receive styles from the user-agent, so they override the family you have on body. Inputs, buttons, and other form controls are often a problem.
In a CSS reset, it is very common to give these elements font-family: inherit example from normalize.css:
input {
font-family: inherit;
}
Inherit will set the input to use whatever font-family it would normally inherit, so it will then use your styles set on body.
Looks like it is inheriting the agent font from the input element.
The browser applies its own styling. In your case, the browser's styling on input takes precedence over inherited properties on html and body. On chrome you can see the user-agent style:
input {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 0px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
You'll be better off using .inp to style your element. Or for consistency you can style the input type:
input[type="text"] {
font-family: monospace;
}
Related
How do I set a different font-family for paper-input. When I inspect the element in chrome it seems to get the style from many classes. Not sure which one to override, also what does -0 mean in a class.
Paper Input's styling documentation delegates to its bundled Paper Input Container's styling documentation, but it still doesn't provide a way to overwrite the font styling.
Fortunately, you can see which fonts it uses on paper-input-container.html source code and overwrite the global Material Design Typography at paper-styles/typography.html, but I think it's not encouraged to do so, hence they didn't brought it as a customizable style.
The corresponding style for the screenshot you took is the following:
paper-input-container.html:
.input-content ::content input,
.input-content ::content textarea,
.input-content ::content iron-autogrow-textarea,
.input-content ::content .paper-input-input {
position: relative; /* to make a stacking context */
outline: none;
box-shadow: none;
padding: 0;
width: 100%;
max-width: 100%;
background: transparent;
border: none;
color: var(--paper-input-container-input-color, --primary-text-color);
-webkit-appearance: none;
text-align: inherit;
#apply(--paper-font-subhead);
#apply(--paper-input-container-input);
}
paper-styles/typography.html:
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* [...] */
--paper-font-subhead: {
#apply(--paper-font-common-base);
font-size: 16px;
font-weight: 400;
line-height: 24px;
};
Anyway, the -0 prefix is just an index. If you have two polymer elements of the same type, it'll place a -0 prefix on the first one and a -1 prefix on the second one. I'm not sure, but I guess that they have been translated into the CSS selector by using updateStyles, since you can customize each one separately through JavaScript, so it helps to namespace each element individually while translating :root and ::content keywords.
So, if you want to overwrite this specific element, I'd tell you to use the -0 prefix, otherwise utilize a more generic class or element to properly select in a general way.
I'm trying to style the font in an input button as bold.
Here's my code:
<input type="submit" id="nm-match" class="nm-button" value="Match" />
Here's my CSS:
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: bold;
}
All the styles are being applied apart from the bold.
Here's a JSFiddle showing the problem: http://jsfiddle.net/CJg43/1/
UPDATE: Why the close votes? Here's a screenshot of how it looks for me, in Chrome on MacOS:
UPDATE 2: ... and for comparison, here's how it looks with the solution (background-color: white) applied - http://jsfiddle.net/CJg43/23/
Are you using chrome for a MacOS? If so, try adding a background-color to the button to see if it fixes it. The default Aqua styles might be interfering. You can also try -webkit-appearance: none; or -webkit-appearance: button;.
When you use numeric values with the font-weight property and you want to use bold then use the value greater than or equal to 700
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: 700;
}
Js Fiddle Demo
I have a right sidebar in my design that pulls in testimonials dynamically, if there are any.
The HTML looks like:
<h4> dynamic content</h4>
Here is my CSS:
#testimonials {
background: #eeeeee;
padding: 30px;
width: auto;
height: auto;
}
#testimonials h4{
font-size: 20px;
line-height: 30px;
font-family: "freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4 strong{
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
The issue is that when there is no content in the <h4> element, the style is still being picked up and adds a background and a border as specified in the CSS. I am assuming that it's generating the h4. Is there a way to have it be empty if there is not any content?
Update:
I am trying this and it seems to work in jsfiddle, but not in the file:
<script type="text/javascript"> $(document).ready(function(){ if ($("#testimonials").text().length < 65) { $('#testimonials').hide(); } });</script>
It counts the HTML inside as text, I think.
Update
Here is another JsFiddle, but this also probably won't work for the OP as it uses jQuery.
jQuery
//onload:
checkStyle();
//checks if the h4 is empty, and hides the whole div if so.
function checkStyle ()
{
if ($('#testimonials h4').is(':empty'))
$('#testimonials').hide();
else
$('#testimonials').show();
}
This does not necessarily work for what the asker is looking for, but could be beneficial for future readers. It is for not styling the h4, not the parent div as op wants.
Assuming you are ok with CSS3, and the <h4> is literally empty, you can modify your CSS to use the :not and :empty selectors.
CSS
#testimonials h4:not(:empty) {
font-size: 20px;
line-height: 30px;
font-family:"freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4:not(:empty) strong {
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
Here is a JsFiddle. You can add content to the h4 to see how it works.
Alternatively, you could even do the opposite, and have a display:none; for empty <h4>s:
#testimonials h4:empty{
display:none;
}
Give #testimonials a display: none; property in your CSS; then, just before whatever Javascript code you use to pull in testimonials finishes running, have it check whether it actually retrieved any, and set display: block; on #testimonials if so.
Somewhat related: When asking questions on Stack Overflow, it's ideal to post as much information as possible, as for example the code you're using to retrieve testimonials dynamically -- it's mentioned in the question and its behavior affects what you're asking about, which makes it well within scope. If you'll update your question with your testimonial-retrieving code, I'll update my answer to show a specific solution.
Do a display:none on your css initially when there is no content.
Use javascript or jquery to show content. Styling will be applied when the content gets displayed.
Initially when there is no content:
#testimonials {
background: #eeeeee; padding: 30px; width: auto; height: auto;
display :none;
}
When content gets generated dynamically use:
$("#testimonials").show();
This seems like alot of front side work when it isn't needed. If you are able to output content into the h4, then you are able to output and additional tag.
<section id="testimonials"></section>
Server Side pushes out:
<h4>all my content</h4>
Then your CSS will work without any work from js.
Most likely you have one for each testimonial?
I have a font that has outline only. It does not have any fill color. Here you can see this fone.
http://www.dafont.com/comica-bd.font
I am using this font in my webpage (fontface). When I change color of font, its outline is changed. Is there a way to change fill color as well using CSS? Or is my last option to use images?
This is what i want:
This is what I could do with CSS and fontface.
Any CSS property to fill background or something.?
No, there's no way to fill the font in css. The blank space can not be considered part of the font for css purposes.
** EDIT - I hadn't checked this in other browsers. It's a pretty gross implementation. I wouldn't recommend doing anything like this. **
This solution uses HTML5, CSS3 and, as such, has some browser support conditions.
See this codepen http://codepen.io/keithwyland/pen/tbfcE (code below if codepen doesn't work)
I've used the Google Web Font Jacques Francois Shadow (http://www.google.com/webfonts) and it's sister font Jacques Francois. Basically, the shadow font has an outline font like the one you're using. The other font is the same but not outline, it's filled in.
What I did was set a data- attribute to repeat the text of the element, then use that in the CSS. I'm also using a pseudo element to spit out the value of that data attribute. It's not perfect (mostly the spacing), but what would help is if your 2nd font could have the exact letter width as your original font and just be filled in instead of outline.
CSS
#import url(http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow);
#import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
body {
background-color: red;
font-family: 'Jacques Francois Shadow', cursive;
color: #000;
font-weight: bold;
}
h1 {
position: relative;
word-spacing: 2px;
font-size: 300%;
z-index: 1;
}
h1:after {
font-family: 'Jacques Francois', cursive;
content: attr(data-ttl);
position: absolute;
color: blue;
top: 0;
left: 0;
letter-spacing: 0.06em;
word-spacing: -0.055em;
text-shadow: 1px 0 blue;
z-index: -1;
}
p {
font-size: 300%;
}
HTML
<h1 data-ttl="Stuff with fill">Stuff with fill</h1>
<p>No fill</p>
I have a ASP hyperlink in my aspx page. The link is just a text "Click here".
I have seen some effects in certain websites; if a user points his mouse on the link, then the link will zoom a bit larger in size. When the user moves the mouse pointer away from the link, the link returns back to its original size.
How do I achieve it? Is it done using CSS?
I have attached my existing CSS here.
<style type="text/css">
.style1
{
font-size: large;
font-weight: bold;
font-family: Arial;
}
</style>
you can acheive this using css selectors http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes targeting the hover pseudo class to apply a new style when the mouse hovers over the link
go to google
<style>
a { font-family: Arial; }
a:hover { font-size: large; font-weight: bold; font-family: Arial; }
</style>
.style1
{
font-size: large;
font-weight: bold;
font-family: Arial;
}
.style1:hover
{
font-size:larger;
}
There is a CSS hover property
example (more info)
a:hover
{
background-color:yellow;
}
You can also use javascript and the mouseover property of the a tag