Is there a way to make the First letter a bit more thinner or vice verca? Please see the image and css provided.
css:
table.form td {
padding: 10px;
font-family: "Open Sans";
font-variant: small-caps;
font-size: 15px;
}
As you can see the first letter of each word which is capitalized is a bit more black/bolder
For the first letter of each word not.
But you can for the first letter in the td element using the :first-letter pseudo selector
For only enlarging the first letter of each word you could use the text-transform:capitilize
Demo with both tricks : http://jsfiddle.net/gaby/8KjT5/1
Alternatively if using jquery you could use the Lettering.js plugin
Calling it with
$(function(){
$('table.form td').lettering('words');
});
combined with the css
table.form td span[class^="word"]{
display:inline-block;
}
table.form span[class^="word"]:first-letter {
font-weight:bold;
font-size:17px;
}
you get the desired result as seen at http://jsfiddle.net/gaby/8KjT5/3/
Consider using a different (more thinner) font and then use the :first-letter CSS3 selector to make the first letter larger instead. There are a number of Open-Type fonts similar to the one you posted.
table.form td {
padding: 10px;
font-family: "Open Sans";
font-variant: small-caps;
font-size: 15px;
}
table.form td:first-letter {
font-size: 18px;
}
I think there is no way you can do it in css. You'll have to wrap the first letter of each word in an extra element and then style it
You need to have the first letter of each word capitalized, and then font-variant: small-caps would give you the result you are after. Luckily, we can do that using CSS too:
{
font-variant: small-caps;
text-transform: capitalize;
}
This works on Chrome 73 on MacOS. Didn't test on other browsers.
Related
The following element:
<span>Test</span>
span {
font-family: Verdana;
font-size: 16px;
font-weight: bold;
line-height: 1.15;
}
Has a height of 19px in Chrome, and 21px in Firefox (fiddle). I tried applying all sorts of CSS resets/normalization, the height is still different. The text itself is rendered identically, but the element height is off by 2 pixels, which breaks my layout.
Any way to fix it without using (inline) block elements?
Use this :
span {
font-family: Verdana;
font-size: 16px;
font-weight: bold;
line-height: 1.15;
display: inline-block;
}
The difference is due to different render of fonts in browsers.
This is a well known problem. It is caused by the fact that Firefox and Chrome use different rendering engines, Gecko and Webkit respectively.
Unfortunately there is no 'best' way to fix it.
You can find a few workarounds in this answer and this one.
Because of span is inline element, you should re-write your code like following way:
document.querySelectorAll("span").forEach(el => {
el.textContent = el.offsetHeight + "px";
});
span {
font-family: Verdana;
font-size: 16px;
font-weight: bold;
line-height: 1.15;
display: inline-block; /* Key line */
vertical-align: top; /* It is recommended when using "display: inline-block"*/
}
<span>Test</span>
The reason for that behaviour is that you are using a span which is an inline element. It does not change its container height based on the line height but based on its parent block element. Apparently, Chrome and Firefox have different default styles for that.
Either make the span a block element using display: block or replace it with a block element like div.
About the height differences the issue is that you have added font-size, family and line-height as well.
So because of this 3 things :
font-family: Verdana;
font-weight: bold;
line-height: 1.15;
your size of text getting bigger then 16px.
Looking at the widely spaced text that's in the center of this site: http://www.sharonhadary.com/ .
I tried setting the line-height property to 1 in the web inspector (it was originally set to 1em), but this had little effect. This is surprising to me, because it looks like that text has a line height of 2 or 3.
Remove the giant font-size and it's fixed.
.banner-wrap .banner h2 {
padding-bottom: 30px;
color: #ffffff;
word-spacing: .1em;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
/* font-size: 100px; */ /*REMOVE THIS */
font-weight: normal;
line-height: 1.1em;
}
Also <font> has been deprecated and should no longer be used
Try to add line-height: 22px instead of 1em.
I didn't understand your problem correctly but
1) If you are concerned about spacing in text, remove "word-spacing: .1em;" from .banner h2 CSS rule in the main_style.css.
2) If you are concerned about spacing between lines, reduce line-height in the .banner h2 CSS rule in the main_style.css.
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 client that has an existing blog through Squarespace. I am taking over the website, and am coming across some code I have never seen before. We have an issue with fonts rendering correctly across all browsers. When I inspect the elements in question, I find some very strange CSS code. I have noticed on many elements such as h1, that there are repeated rules in the CSS. See below for example:
#topNav nav, #topNav ul, #topNav li, #topNav a
{
font-family: Georgia,serif;
font-weight: normal;
font-style: italic;
line-height: 1.6em;
font-size: 13px;
text-transform: normal;
letter-spacing: 0px;
font-family: "Helvetica Neue","Arial","sans-serif";
font-size: 30px;
line-height: 4em;
text-transform: capitalize;
text-decoration: none;
letter-spacing: -1px;
font-weight: bold;
font-style: normal;
}
As you can see, there are several repeated rules. What are the consequences of this CSS code? Could this cause the code to be styled differently on different browsers?
This is an extremely large website, so I am hoping this wasn't a habit of the last developer to code like this. Should cleaning the styles up be my top priority? Any opinions would be fantastic!
Thanks!
I would have to say that it is just poor coding. As for the impact on rendering, I would think that the last instance of the style would take precedence since the whole nature of CSS is "cascading" inheritance.
A simple experiment or two should yield the answer to your question.
I was basically trying to abbreviate "font-style" to just "font" by using the shorthand property. However, it only seems to work if I specify other properties (size/line height/font-family) too on the same selector.
If I comment out any additional specification, the "italic" is ignored! Am I missing something here or am I just not supposed to use
.main{font:italic;}
instead of (for instance)
.main{font-style:italic;}
or
.main{
font:italic 1em/1.2em georgia,"times new roman",serif;}
So, what's the minimum requirements for using the font shorthand?
The font-family and font-size are the minimum styles required for this style property.
Example:
font: 1em "Times New Roman", Times, serif;
An example of a full shorthand would be the following:
font: bold italic small-caps 1em/1.5em verdana,sans-serif
This would replace the original code below:
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
minimal specifications are size and font-name.
In your case it will look like this:
.main{
font: 1em verdana;
}