How to prevent a ligature at one, specific place? - html

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 Hanf‌tierheft.
#import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
body {
font-family: 'Libre Baskerville', serif;
font-variant-ligatures: normal;
font-size: 50px;
}
<p>Hanf‌tierheft</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>

Related

How to make Arabic font-stretch: condensed or expanded in CSS?

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>

How do I fix "fallback" weight for different fonts?

I have a small, but immensely annoying problem.
I'm supposed to have a font-family for my h1, in the following fallback: BreeSerif, arial, sans-serif.
BreeSerif should be weight 400.
Arial should be weigth 700.
Sans-serif should be weight 400.
Now I have tried several things, but none seem to work.
First try:
This renders my BreeSerif to "normal", makes Arial to bold, BUT it seems impossible to render sans-serif to "normal" since I've declared the h1 to 700.
Second try:
Now since BreeSerif shall be normal, I could simply apply "sans-serif" to a #font-face and put it in font-weight: 700, but it doesn't work.
/* FIRST TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;'
h1 {
font-family:
BreeSerif,
bold-arial,
sans-serif;
}
/* SECOND TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;
#font-face {
font-family: 'sans-normal';
src: local('sans-serif');
font-weight: 700;
h1 {
font-family:
BreeSerif,
arial,
sans-serif;
font-weight: 700;
/* THIRD TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 400;
#font-face {
font-family: 'arialBold';
src: local('arial');
font-weight: 700;
h1 {
font-family:
BreeSerif,
arialBold,
sans-serif;
font-weight: 400;
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;
}
#font-face {
font-family: 'TradeWinds';
src: url('fonts/TradeWinds-Regular.ttf');
font-weight: 400;
}
}
#font-face {
font-family: 'sansnormal';
src: local('sans-serif');
font-weight: 700;
}
body {
width: auto;
background: #eee;
font-family: arial, sans-serif;
}
p {
font-family: helvetica;
font-size: 14px;
color: #222;
}
/* LÖS DENNA SEN! */
h1 {
font-family:
BreeSeri,
arial,
sansnormal;
font-weight: 700;
}
#ContentWrapper {
background: white;
width: 960px;
margin: auto;
}
Expected result: normal, bold, normal
Actual result: normal, bold, bold
Defining dimensions by using size-adjust for fallback fonts slowly hits mainstream according to:
https://caniuse.com/mdn-css_at-rules_font-face_size-adjust
See the current implementation percentage by today used browser
What does this mean?
You can use the following CSS definition:
#font-face {
font-family: 'Lato';
src: url('/static/fonts/Lato.woff2') format('woff2');
font-weight: 400;
}
#font-face {
font-family: "Lato-fallback";
size-adjust: 97.38%;
ascent-override: 99%;
src: local("Arial");
}
h1 {
font-family: Lato, Lato-fallback, sans-serif;
}
As you can see we define a fallback version of our webfont (in our case Lato) and this fallback version is just a refernce to "Arial", which is a safe web font. But with size-adjust we can tweak the size of the fallback font. The attribute ascent-override has the same implementation rate than size-adjust.
Getting the adjustment settings
But now you wonder, where do i get those adjustment sizes. This nice little page calculates them for you and gives you the complete CSS for the custom fallback font:
https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Montserrat

basic css font-weight property not working

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.

How to set Helvetica font?

How to set Helvetica font?
I add css:
body
{
font-family: Helvetica, Sans-Serif;
color: #444444;
font-size: 9pt;
background-color: #FAFAFA;
}
but in Mozilla I see MS shell dlg font.
Why is this happens and how will repair it?
Update:
I set Arial but in Mozilla I see MS shell dlg again.
If you want all browsers to use Arial whenever Helvetica is not available, you can always specify Arial as a second choice font.
body
{
font-family: 'Helvetica', 'Arial', sans-serif;
color: #444444;
font-size: 9pt;
background-color: #FAFAFA;
}
because font-family can use any number or arguments, and it will use the first one in the list that is available.

Doing small-caps manually to get desired look rather than font-variant: small-caps;

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>