I've added a contact bar at the top but for some reason the numbers aren't on the same line.
http://puu.sh/kY9xG/6aed0786fc.png
css
.top_bar .tob_bar_right_col p {
font-size: 12px;
padding: 14px 0;
margin: 0;
line-height: 17px;
font-weight: 600;
}
It is correct only.It's coming due to the default font you used. Change the font type like below
.top_bar .tob_bar_right_col p {
font-family: "Times New Roman";
font-size: 12px;
padding: 14px 0;
margin: 0;
line-height: 17px;
font-weight: 600;
}
That's because of the font that you are using.
Some fonts uses the old way of placing the digits (text figures), with ascenders and descenders. The new way of placing the digits (lining figures) treats them similar to capital letters.
To get the new way of placing the digits you need a font that uses that form, for example Arial.
That's because of the font-family you are using. Some of them will make the numbers look weird. Just change you're font-family for that text and it should work.
Example:
.top_bar .tob_bar_right_col p {
font-family: "Arial", sans-serif;
}
Looks like it's a custom font, which appears different than other fonts.
You can check it e.g. by typing the same text in Gimp or Photoshop with the same font. It should output the same result.
Make sure, you're using the desired font-family.
Related
I'm using anchor tags with 'content' set on :before to be : "——";
a.line {
font-size: 21px;
font-family: Khula,sans-serif;
display: inline-block;}
a.line:before {
content: "——";
padding-right: 25px;
font-weight: 400;
font-family: serif;
font-size: 24px;
letter-spacing: -10px;
transition: all .3s;}
Sometimes they render like this:
When they should render like this:
It doesn't happen every time the page loads, and appears to just happen at random. Has anyone encountered this before and found a solution?
Thanks in advance.
Use the Unicode value instead. An em dash is U+2014
content:"\002014";
I'm creating a variables-file with scss for my Liferay 7 -project and as I'm going to have multiple different text styles, I was wondering what would be the best way to write them? Values below are just examples.
Text type
Font
Size
Weight
Other properties
Title 1
Arial
1.5rem
700
Title 2
Calibri
1.25rem
500
#FF0000
Body
Courier
1rem
400
Link
Arial
1rem
400
underline
Should I format it as clear and long as possible or should I rather try to fit them inside a single line, or something in between? Shorter seems better in my opinion, but is it too cramped to be understood clearly, if it was in need of modification?
Example 1:
$title1FontFamily: "Arial";
$title2FontFamily: "Calibri";
$bodyFontFamily: "Courier";
$linkFontFamily: "Arial";
$title1FontSize: 1.5rem
$title2FontSize: 1.25rem
$bodyFontSize: 1rem // not really necessary, if base
$linkFontSize: 1rem // not really necessary, if base
// ...
.title1 {
font-family: $title1FontFamily;
font-size: $title1FontSize;
// ...
}
// or
.title2 {
font: $title2FontFamily $title2FontSize;
}
Example 2:
$title1Font: Arial 1.5rem 700;
$title2Font: Calibri 1.25rem 500 #FF0000;
$bodyFont: Courier 1rem 400;
$linkFont: Arial 1rem 400 underline;
.title1 {
font: $title1Font;
}
You might take a look at #extend.
.font-one {
font-family: sans-serif;
font-size: 1rem;
line-height: 1.2em;
}
You can basically just create your items and share the styles whenever you call the class #extend .font-one. Here's some more info: https://sass-lang.com/documentation/at-rules/extend
font: SemiBold 14px/17px Basier Square;
I am trying to copy styles of a text from Adobe XD and it shows me font-size as above, I am confused, should I interpret it as 14px or 17px?
Answer: Font-size = 14px, Line-Height = 17px;
It is not Adobe specific, it's simple HTML definition
Reference: From Mozilla Docs, we can understand that
If font is specified as a shorthand for several font-related properties,
then-->
line-height must immediately follow font-size, preceded by "/", like this: "16px/3"
font: SemiBold 14px/17px Basier Square;
That would be
.element {
font-family: 'Basier Square';
font-weight: 600; /* SemiBold */
font-size: 14px;
line-height: 17px;
}
I have a problem with fonts, because they don't render same on Windows and on OS X. On Windows, characters are vertically aligned in line, but on OS X, the characters are positioned much closer to top of the line.
I highlighted the text in screenshots so you can see the difference.
I am using font Gotham. Any ideas? Do I have to use browser-specific hacks or is it a font issue?
Link to JSFiddle: http://jsfiddle.net/wewo/myh4amud/
body {
font-family: 'Gotham', Arial, sans-serif;
background-color: #282828;
font-size: 14px;
font-weight: normal;
}
div {
color: white;
font-size: 5em;
padding-top: 15px;
padding-bottom: 6px;
line-height: 1em;
}
<div>3</div>
Thank you!
The problem is in process converting or generating webfont font.
I use tool Font Squirrel for convert correct, with this option EXPERT... :
If don't work with Google Font, download him and send for convert.
Problem with Win Ascent and HHead Ascent fields in font. Windows use Win,
mac - HHead. Use FontForge for edit this.
My problem is that font-weight in css doesn't apply on serbian latin characters (šđčćž ŠĐČĆŽ) which the font supports. for example:
#header h1{
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #FFF;
font-size: 50px;
padding-left: 20px;
padding-top: 20px;
letter-spacing: 1px;
text-shadow:1px 2px 3px black;}
shows all letters bolded except serbian latin characters ON SOME COMPUTERS. It works on mine (win8), but not on two of theirs (win8.1 and winXP). Same HTML, same CSS, all three of us using Chrome and connected to the Internet. Do you have any idea what could it be?
Have you done this? How to add multiple font files for the same font? none of the SVG fonts that I have seen have different font-weights and I've not yet run into directions for creating additional font weights in that font file type. Some font files appear to have font weights, so my guess is that the systems are choosing or ending up with a different font file type.