I want to use Arabic fonts in my website and want the headings condensed but there is not effect in text, But when I use English fonts like Arial then CSS effectively condensed the characters.
Kindly help me making Arabic fonts condensed.
.heading{ font-size: 60px; text-align: center; color: maroon; font-weight: bolder; font-family: 'Segoe UI'; font-stretch: ultra-expanded }
<div class="heading">هذا ڪتاب</div>
You need to add <html lang="ar"> to your HTML to specify that the language is Arabic. You also need to use the :lang(ar) pseudoselector to target Arabic language text. Also, font-stretch doesn't work on every font, only some. You can read more about font-stretch here (MDN) or here (CSS-Tricks).
For fonts that do not allow font-stretch, you can work around it by using positive letter-spacing to expand the word, or negative letter-spacing to condense the word.
Here's an example stretching the text with letter-spacing: 30px:
.heading:lang(ar) {
font-size: 60px;
text-align: center;
color: maroon;
font-weight: bolder;
font-family: 'Segoe UI';
font-stretch: ultra-expanded;
letter-spacing: 30px;
}
<html lang="ar">
<p class="heading">هذا ڪتاب</p>
Here's an example condensing the text with letter-spacing: -5px:
.heading:lang(ar) {
font-size: 60px;
text-align: center;
color: maroon;
font-weight: bolder;
font-family: 'Segoe UI';
font-stretch: ultra-expanded;
letter-spacing: -5px;
}
<html lang="ar">
<p class="heading">هذا ڪتاب</p>
Related
All bold versions of fonts appear strange on mobile device, I made the font enormous for testing purpose and from that it seems the font kind of "doubles" over itself, with a minor offset between them. If and when I zoom to look closer at the text it "becomes" normal - and shows just as it should show (and does show, on desktop browser).
Non-zoomed printscreen
Zoomed printscreen
There's not really any "voodoo" code to show, it's all very basic. All bold fonts just look strange at their shown state unless you pinch-zoom them on mobile. But for the sake of it:
.title {
font-size: 30px;
font-family: "Open Sans Condensed", sans-serif;
font-weight: 500; /* same problem with 900 */
font-style: normal;
font-variant: normal;
color: #000;
text-align: center;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
<div class="title">
World wide shipping for flat rates!
</div>
I tried different browsers on mobile, and all show the same issue. This happens to ALL fonts when bold, not just the one I use in this example.
<style type="text/css">
.title {
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 900;
font-style: normal;
font-variant: normal;
color: #000;
text-align: center;
}
<div class="title">World wide shipping for flat rates!</div>
So I'm not unable to use margin that consists of three texts. I tried adding it both in html and css, none of them worked. Am I supposed to format it in a different way?
.middlelectureread {
margin-left: 740px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 20px;
}
.middlecaptivityread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
.middleprotestread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
<span class="middlelectureread">READ MORE</span><span class="middlecaptivityread">READ MORE</span><span
class="middleprotestread">READ MORE</span>
Like Neffy wrote you shouldn't use span here. Span element is inline and shouldn't be a container to postion elements. For such things we have divs or HTML5 semantic elements like Section, Header, Footer etc. span can be useful when we want to style for example a part of some text, paragraph.
<p>If you do it you will see a <span class="warning">warning</span>sign</p>
And if we apply color to this span it will work.
In general I like ligatures, they make texts easier to read. I want to enable them on all of my HTML-page.
However there is this one word Hanftierheft (it is german, and a compond word of Hanf and Tier and Heft). I do not want a ligature for ...nfti..., but I want a ligature for ...eft
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
body {
font-family: 'Source Sans Pro', sans-serif;
font-variant-ligatures: normal;
font-size: 50px;
}
Hanftierheft
How can I tell my browser to generally use ligatures, but not in that, one, specific case?
Use the entity for the zero-width non-joiner character, and write the word in your HTML code as Hanftierheft.
#import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
body {
font-family: 'Libre Baskerville', serif;
font-variant-ligatures: normal;
font-size: 50px;
}
<p>Hanftierheft</p>
You can use a span and give it font-variant-ligatures: none;:
#import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
body {
font-family: 'Libre Baskerville', serif;
font-variant-ligatures: normal;
}
p {
font-size: 50px;
}
span {
font-variant-ligatures: none;
}
<p>Han<span>fti</span>erheft</p>
My html:
<div id="unsurpassed">
<p>
<span>FIRE </span>| Unsurpassed Efficacy
</p>
</div>
My CSS:
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: 300;
}
#unsurpassed span {
color: #1D74B6;
font-weight: 400;
}
I want the phrase "| Unsurpassed Efficacy" to have a much lighter weight that "FIRE" currently that isn't happening, not really sure why.
Try using normal and bold for font-weight instead of numbers.
Demo: http://jsfiddle.net/8rHbv/2/
CSS:
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family:"Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: normal;
}
#unsurpassed span {
color: #1D74B6;
font-weight: bold;
}
Use bolder or bold value along with 300 or 400 value and check this work perfect...
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: bolder !important;
}
#unsurpassed span {
color: #1D74B6;
font-weight: 400;
}
Also use important word.
Check this DEMO jsFiddle
Do you have all the font weights installed on your computer?
Try add important! after your css code here:
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: 300;
}
#unsurpassed p span {
color: #1D74B6;
font-weight: 900 !important;
}
Take a look at this jsFiddle: http://jsfiddle.net/GeUj3/1/
What you are using is valid CSS and should work if the system contains both regular and light typeface of Myriad Pro. Most computers do not contain either of them; this is a different topic, but may affect the analysis of this problem, since you might be looking at the rendering in some other font (the browser’s fallback font) if Myriad Pro is not available.
I cannot test the exact code since my system lacks Myriad Pro, but testing with DejaVu Sans instead, with no other change to the code, on Win 7, I noticed that IE 11 shows “| Unsurpassed Efficacy” in DejaVu Sans Light but Chrome and Firefox use DejaVu Sans (regular) instead, even though developer tools show that the CSS rules are being applied. You may have encountered a similar browser problem.
In general, typefaces lighter than normal (400) often work poorly even in modern browsers. A workaround is to use a light typeface as if it were a font family, with normal font-weight. This works on the browsers tested for DejaVu Sans.
So the following may work in your situation: in the rule for #unsurpassed p, replace font-weight: 300 by font-family: "Myriad Pro Light".
You are visually not going to notice a difference between font-weight 300 and 400
You can do something like this
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p span {
color: #1D74B6;
font-weight:bold;
}
#unsurpassed p {
color: #77787B;
}
You can check the different font weights here
Its because your not putting the class IDs in your html, if you don't then the CSS does not know what to do.. and you cant conflict the class id elements.
<div class="unsurpassed">
<p>
<span class="unsurpassed span">FIRE </span><span class="unsurpassed p">| Unsurpassed Efficacy<span>
</p>
</div>
Remember that css class elements are global, so label were you want the css to work in the proper place and don't have then conflict.
Constraints:
1. This is for an HTML newsletter (no HTML5 or JS)
2. Font-family is {Lucida Sans, Lucida Grande, Lucida San Unicode, serif}
I need to match an existing PDF newsletter mast head (rather improve it but it's not in the brief) with text not Image (since many email clients don't load images automatically and it's the masthead)
The code I have so far (adapting a free theme from campaign monitor called Classic by 45royale) is:
<h1 style="color: #fff; font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0; padding: 0; line-height: 33px; letter-spacing: 16px; font-variant: small-caps;">Teeᴇᴇ</h1>
<p style="color: #dfa575; font: normal 11px Georgia, serif; margin: 0; padding: 0; line-height: 11px; letter-spacing: 2px">NEWSLETTER …</p>
Note the first two `e's have been small capped and are noticably thinner in stems than the 'T' and are much smaller than the small caps in the PDF.
The second two 'E's are small cap Unicode characters I found in the phonetics section of Unicode. They have equivalent stems but are still a little too low in terms of height above baseline.
EDIT: I just checked 3 Lucida Faces on OS X in suitcase fusion and Small Caps for full alphabet doesn't exist in any of the Lucida family of fonts I'm looking at.
All the letters including the 'T' and 'P' seem thicker than the PDF version too but that's only a second order issue.
What manual options are available. I'm inside an <h1> tag which means if I make a new tag to set a different font-size after the 'T' for 'ERRA' I get a LineFeed for free :-/
How can I set multiple font-sizes on the same line, should I just be using a <p> tag and custom classes to set CSS and inline font sizes?
Thanks for reading :-)
You can set multiple font sizes on the same line with an inline element like <span></span>. So in your example...
<style>
h1 { color: #fff; font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0; padding: 0; line-height: 33px; letter-spacing: 16px; }
h1 span { font-variant: small-caps; }
.newsletter { color: #dfa575; font: normal 11px Georgia, serif; margin: 0; padding: 0; line-height: 11px; letter-spacing: 2px }
</style>
<h1>Tee<span>ee</span>EE</h1>
<p class="newsletter">NEWSLETTER …</p>
EDIT: Here's an updated snippit that may help:
<style>
body { background:#658290 }
h1 {
color: #fff;
font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif;
margin: 0; padding: 0;
line-height: 33px; letter-spacing: 16px;
}
h1 span { font-variant: small-caps; letter-spacing:0.3em }
h1 span.upper { font-size:130%; }
</style>
<h1><span class="upper">ee</span><span class="lower">ee</span></h1>