On some parts of the site I am maintaining German umlauts are displayed in bold (see screenshot). I am using font-family: Source Sans Pro, Arial, sans-serif; with font-weight: 300. The font is embedded from Google Fonts.
Changing the font weight to 400 and above or using a different font works flawlessly. The thing that really weirds me out that it only occurs for the lower paragraph. I tried disabling every font-related style in Safari Web Inspector for both paragraphs without success.
This seems to only happen in Safari and Chrome on iOS (Chrome on macOS and Android works fine).
Affected site: https://sentience-politics.org/de/positionspapiere/
Found the solution. The umlauts were actually different ASCII characters than the standard ones (e.g. 097 204 136 instead of 195 164 for ä). We suspect they come from a time when the website was using an outdated LaTeX plugin. Swapping the characters for normal umlauts fixed the problem.
This solution worked for me:
let text = NSMutableAttributedString(attributedString: stringSrc.html2AttributedString!)
text.addAttribute(NSAttributedString.Key.font, value: UIFont(name: "HelveticaNeue-Medium", size: 16.0)!, range: NSMakeRange(0, stringSrc.length))
label.attributedText = text
Font names can be found here:
https://github.com/lionhylra/iOS-UIFont-Names
Related
In a regular web browser there are such naive emojis as in the photo:
My app runs on Electron and the emojis look exactly like this there. How can this be changed in favor of apple emoji? I can't use emojione and search everywhere for these emojis because there are hundreds of places in my application where users write these emojis themselves and I can't physically search everywhere for these emojis
The "right" solution is to use a font that provides Emojis you think fit your app best, but doesn't include any text so you can use your default font for text. Mind that you cannot just "use" Apple's Emojis because that would bring copyright implications for platforms that don't ship with them (i.e., Windows and Linux).
Thus, I recommend to search for an Emoji font you can redistribute with your application (with proper credit if needed by the font's licence).
If your current font chain is, for example:
* { font-family: "Roboto", "Arial", sans-serif; }
You could just go ahead, load your Emoji font (by using #font-face, for example) and prepend it to your font chain. If that font is loaded using the alias "my-emoji-font", then this would look like:
* { font-family: "my-emoji-font", "Roboto", "Arial", sans-serif; }
However, you will have to make sure that the Emoji font does not include any non-Emoji symbols, as these would then also be taken from the Emoji font. Also, this will replace Emojis for any text in your application (thus the * as the CSS selector; you could of course write a CSS rule for specific elements as usual, but bear in mind that you'll have to copy the font chain).
If your Emoji font should lack any Emoji that is used by your application, Electron will display the corresponding Emoji from Roboto, Arial (in this example) or the system's sans-serif font if it's available there.
I decided to use font-variant: small-caps for my h1 with font from google fonts ( Roboto Condensed - with latin extended characters)
On every browser it renders properly but not on Safari ( tested on macOS Sierra 10.1 )
font-variant: small-caps works as well on Safari but not with lating extended charactes. Then it just going creazy. Instead of showing "Bądźmy w kontakcie" it shows "A aa w kontakcie" or it swaps ę to some bolder ę.
How to make it work ?
It seems that fonts embeded from google fonts doesnt work for what I need. Maybe if I would attach my fonts diffrently it could work....
Anyway I decided to delete font-variant and I used text-transformation: uppercase and I changed font-size to smaller value and I have same effect that I wanted to produce.
We are working in iOS app and we are using "Adobe Arabic" and "Tahoma" font.
Both fonts in some area break. For example
Tahoma breaks by adding space between in a single word as shown in image below
Not sure why this is happening for some works. We have similar issue for Adobe Arabic for some Arabic text
Mostly font breaks when using verses from quran "بِسْمِ اللَّـهِ الرَّحْمَنِ الرَّحِيمِ" otherwise it is fine... That is when ever we add tajweed font break by adding space.
What could be the possible reason for this
As I see, its failing to render diacritics. Diacritics should be merged to their previous letters in Arabic. In your example, it breaks with the Shada diacritic ّ :
It happens mostly in Quranic verses because they are fully vocalized compared to normal texts.
A solution is to normalize your texts and strip diacritics. The list of diacritcs is:
// Diacritics
'0x64b' // FatHatan
'0x64c' // Dammatan
'0x64d' // Kasratan
'0x64e' // FatHa
'0x64f' // Damma
'0x650' // Kasra
'0x652' // Sukun
'0x651' // Shadda
The normalization is recommended for normal text but not Quran verses since its considered as a holy text and recommended to be written as fully vocalized Uthmani script. You may use pre-rendered images.
A deep solution is to use a rendering engine like harfbuzz. It renders Arabic perfectly.
Try this line in css:
.element {
letter-spacing: -1px;
}
It works with me.
Try these in your css
font-family: "Traditional Arabic", "Montserrat","sans-serif","Times New Roman";
I'm displaying strings with a combination of Japanese and western characters. I know what font I'm using for the western characters...but how do I find out what font is used for the Japanese characters?
(And can I change it?)
The default Japanese system font in iOS is Hiragino Kaku Gothic ProN W3. It's also the default fallback for displaying Japanese text when using a Latin font. In my own experience, it doesn't matter whether a Latin serif or sans serif font is in use—Hiragino Kaku Gothic ProN W3 is still used for the Japanese text.
(The more interesting question is how you'd go about changing it.)
I've run into a problem where the glyphs are positioned as I expect when I specify line height:1 UNTIL the font-size became greater than 255px. Set the font-size to 256 and bam, the glyphs change position dramatically and become too high on the line.
I'm using Google Web fonts to bring in Josefin Sans - http://www.google.com/webfonts/specimen/Josefin+Sans
Edit: I'm using Chrome on Fedora, not one of those cool machines with market share and funding
Simplified fiddle here - http://jsfiddle.net/jBAnc/
Edit: The fiddle isn't showing the code for me. If you click on "Bacon", it'll toggle between 255 and 256, causing it to bounce back and forth (at least for me).
I don't encounter this problem when the font is a basic web-safe font such as Arial, so I assume it has something to do with the google Web-font. Is this a problem with the font's encoding, possibly the program the font was created with (255 seems significant)?
I'm getting inconsistent line-height/spacing issues with this font. I'm beginning to suspect that it's a problem with the construction of Josefin Sans itself.
EDIT: after a little more Googlizing, it appears the issue is not so much the font itself, but the Google Webfont API.
http://webdesignandsuch.com/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/
Short answer: Download and host the font yourself and you should have no issues.
There's nothing wrong at all. You're just expecting all fonts to have the same x-height, descender/extender-heights, and they just don't (9 times out of 10).
The following fiddle illustrates the differences between 4 fonts (3 being very common fonts found on Macs, PCs, etc). And Josefin Sans is in the house as well.
Pay particular attention to the differences in:
the top spacing between the capital Q and its parent's border
the various heights of the Xx (especially, the lower-case vs capital)
descender of the lower-case G (some actually come out of their
parent)
_http://jsfiddle.net/suK2U/
To answer your question about 255/256px, I'd venture to say that you just happened upon a 'sweet-spot' between your container and its parent. At 256, it starts colliding (and margins start to collapse, or the like).