I'm having a hard time trying to limit the size of the app by reducing the unicode range of my fonts.
I've tried several different combinations, the error is the same no matter what range I put there:
-invalid Unicode range '005A'
Where 005A can be anything, if I do this:
unicodeRange: U+0020-007E;
The error is this: -invalid Unicode range '007E'
I've tried different fonts, Arial, Helvetica, Century... Same error in everyone, all the unicode ranges throw errors in the CSS file.
Any ideas what could be wrong? I've read the documentation from Adobe, not sure what else to do.
Here is a CSS file as example - it works well for me in an iOS/Android card game app (where I need card suits and cyrillic characters):
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face {
src: url("/assets/fonts/arial.ttf");
fontFamily: embFont;
embedAsCFF: false; /* required for StyleableTextField */
unicodeRange:
U+0020-U+0040, /* Punctuation, Numbers */
U+2660-U+2666, /* Card suits */
U+0041-U+005A, /* Upper-Case A-Z */
U+0061-U+007A, /* Lower-Case a-z */
U+0410-U+0451; /* Cyrillic */
}
s|LabelItemRenderer {
fontFamily: embFont;
}
Related
Given the element :
<span>一、對話 Dialogues</span>
One of my font is really unelegant on that side, adding an overly wide space :
Is there a css rule to style only the punctuation 、 ?
NB: I searched the web and found nothing. Currently assume only HTML elements can receive styles. So I have to use JS to get the string, then str.replace('、','<span class="punt">、</span>'), then put back the string with the dedicated html element and class. But I would like to ask the community and create this question, even if dumb, so other users may find this question/answer in the future.
You could use #Font-face and Unicode range to style your punctuation with an other font.
First, identify your characters' code :
var charcode = '、'.codePointAt(0).toString(16); // "3001"
alert(charcode) // "3001"
Then, load your default font and your support font with unicode range
/* For general characters *********************************** */
#font-face {
font-family: 'MyFont';
font-style: normal;
font-weight: 400;
src: local('Font1onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/font.woff2') format('woff2'),
url('https://fonts.gstatic.com/font.woff') format('woff');
}
/* For special characters ********************************** */
#font-face {
font-family: 'MyFont'; /* IMPORTANT: same name*/
src: local('Font2onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/anotherFont.woff2') format('woff2'),
url('https://fonts.gstatic.com/anotherFont.woff') format('woff');
unicode-range: U+3001; /* IMPORTANT */
}
Should work.
Source : https://jakearchibald.com/2017/combining-fonts/
Alternatively, you could edit that font on this character.
As you can see below, the Texta-Light font in Chrome appears completely different with Safari. Chrome displays the font as I like but Safari's rendering on OS X and iOS looks too thin. The Safari image below is taken on iOS and as you can see for some reason the font appears as if there is two bits of text present.
I've looked for a solution but found nothing which works. I tried using -webkit-font-smoothing: subpixel-antialiased; but according to this question, the code isn't working anymore.
Chrome:
Safari on iOS:
Here is the code for the images above:
h2 {
font-family: 'Texta-Light', sans-serif;
font-size: 3.5em;
line-height: 1.2em;
}
Is there any solution to this?
There is a CSS property, text-rendering, which in Safari is by default set to optimizeSpeed. What you want to change is:
text-rendering:optimizeLegibility;
From https://css-tricks.com/almanac/properties/t/text-rendering/
There are four possible values:
• auto (default) - The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. Be aware that different browsers interpret this value differently.
• optimizeSpeed - The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.
• optimizeLegibility - The browser emphasizes legibility over rendering speed and geometric precision. This enables the use of special kerning and optional ligature information that may be contained in the font file for certain fonts.
• geometricPrecision - The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts—such as kerning—don't scale linearly, so geometricPrecision can make text using those fonts look good. When SVG font is scaled, the browser calculates pixel size, then rounds to the nearest integer. The geometricPrecision property allows for more fluid scaling. Note: Only WebKit browsers apply this fluid value, Gecko treats the value just like optimizeLegibility.
There is an additional setting -webkit-font-feature-settings, of which one of them is kerning:
-webkit-font-feature-settings
h2 {
-webkit-font-feature-settings: "kern" 1;
}
If, as per your comment, you are only serving .otf, you will need to serve the other file types too.
This could be causing an issue to do with iOs as until iOs 4.2, SVG was the only format to use custom fonts on the ipad or iphone.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
A great tool to use is Font Squirrel's Webfont Generator
Edit:
Also as mentioned in the comments the font-weight is set to bold by default and you are loading a light font.
Safari has an issue with fonts. The easiest fix for the duplicate text issue is clarifying the font-weight:
font-weight: 400;
Using Lucho's Javascript's text stroke solution along with specifying font-weight will make your text the same as it is on Chrome.
I found a post which uses JS to adjust the text-stroke property. Here is the actual code:
$(document).ready(function(){
is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
is_safari = navigator.userAgent.indexOf("Safari") > -1;
is_opera = navigator.userAgent.indexOf("Presto") > -1;
is_mac = (navigator.userAgent.indexOf('Mac OS') != -1);
is_windows = !is_mac;
if (is_chrome && is_safari){
is_safari=false;
}
if (is_safari || is_windows){
$('body').css('-webkit-text-stroke', '0.5px');
}
});
You can modify the text-stroke of some other element.
Hope it helps.
Try this:
html, body {
text-rendering: optimizeLegibility;
}
or if like that it doesn't work,
html, body {
text-rendering: geometricPrecision;
}
I had the same issue with font rendering on Safari, the browser couldn't cant find a bold version for the web font so it was trying to copy it which may vary in the bad rendering result.
You can try to disable it by adding: this CSS:
font-synthesis: none
Otherwise you can try setting the font-weight manually to one which is available ie.
font-weight: 400
Based on #lucho's answer, I used same approach but I'm applying the fix as soon as <body> tag loads. This fixes the issue with too thin Open Sans font in iOS Safari.
<body>
<script>
(function () {
var ua = navigator.userAgent
var isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && ua.indexOf('Chrome') === -1
if (isIOSSafari) {
document.body.style.webkitTextStroke = '.5px'
}
})()
</script>
ALTERNATIVE APPROACH:
Alternatively you can add a class like ios-safari to <html> tag and then apply CSS to it normally:
<script>
(function () {
const ua = navigator.userAgent
const isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && !ua.includes('Chrome')
if (isIOSSafari) document.documentElement.classList.add('ios-safari')
})()
</script>
</head>
CSS:
.ios-safari {
-webkit-text-stroke: .5px;
}
Work for me!!!
.text{
font-weight: unset;
-webkit-text-stroke: thin;
}
Try it...!
A potential tested solution is to increase font-weight by a 100 iOS-wide, using a feature-query (assuming your default font weight is 400):
#supports (-webkit-touch-callout: none) {
body {
font-weight: 500;
}
}
I used this approach, which kept he font on Chromium based browsers the same as before and changes only for safari browser.
$(document).ready(function(){
if (navigator.userAgent.indexOf("Safari") == 125) {
$('body').css('-webkit-text-stroke', 'thin');
}
});
I'm a graphic designer in a magazine and we'd like our website to be closer to our printed issues.
In the magazine, we use small caps for strings of more than 2 capital letters in a row.
I know it is possible to use true small caps with an OpenType font. I also know that you kan target 1st lines or 1st letters with CSS
So my question is:
Would it be possible to target/detect strings of capitals letter within a text, and apply automatically the font-variant property to it (without having to manually apply styles or classes).
here's an example
If you mean like this, sure! The regular expression could be improved though, as it only matches words, not sequences of words, but regex is still alienspeak to me, so this is the best I can do:
[].forEach.call(document.querySelectorAll(".smallcapsify"), function(content) {
var parsed = content.innerHTML.replace(/[A-Z]{2,}/g, '<span class="small-caps">$&</span>');
content.innerHTML = parsed;
});
#import url(http://fonts.googleapis.com/css?family=Merriweather);
span.small-caps {
font-variant: small-caps;
text-transform: lowercase;
}
/* Styles to make it look nicer */
body {
font-size: 2em;
font-family: Merriweather, serif;
text-rendering: optimizeLegibility;
/* Enable common and discretionary ligatures, according to http://blog.fontdeck.com/post/15777165734/opentype-1 and http://caniuse.com/#search=font-feature-settings */
-webkit-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";
}
<div class="smallcapsify">
This is SOME TEXT. Here is some MORE text.
</div>
I've defined a Russian localization file but when setting the locale all I get is ? symbols...
When creating a sample flex app with Cyrillic characters they are displayed just fine, but somehow setting the locale does no work.
Any ideas?
Fixed it...
My localization files were not encoded in UTF8, that was causing the problem.
It sounds like you're using embedded fonts, but the characters you're trying to display aren't included in the font.
From the docs:
<?xml version="1.0"?>
<!-- fonts/EmbeddedFontCharacterRange.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
#font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing: true;
unicodeRange:
U+0041-U+005A, /* Upper-Case [A..Z] */
U+0061-U+007A, /* Lower-Case a-z */
U+0030-U+0039, /* Numbers [0..9] */
U+002E-U+002E; /* Period [.] */
}
TextArea {
fontFamily: myFontFamily;
fontSize: 32;
}
The following #font-face declaration works perfectly well on Firefox (Mac) but not Safari/WebKit:
#font-face {
font-family:MyGaramond;
src:local("Garamond Premier Pro"), /* Full name */
local("GaramondPremrPro"), /* Postscript name */
url("GaramondPremrPro.otf") format("opentype"); /* Fallback */
}
h2 {
font-family:MyGaramond, sans-serif !important;
}
To clarify, I've also tried:
#font-face {
font-family:MyGaramond;
src:local("Garamond Premier Pro"), /* Full name */
local("GaramondPremrPro"), /* Postscript name */
url("GaramondPremrPro.otf"); /* Fallback */
}
h2 {
font-family:MyGaramond, sans-serif !important;
}
, with/without quotes, etc.
Has anyone else experienced this, and if so, how did you fix it? That this isn't working is really baffling (and a tad irritating...).
I think webkit still has some problems with opentype. How does opera handle it?
I always use the #font-face Generator from font squirrel, never had any browser issues that way.
Check the site: http://www.fontsquirrel.com/fontface/generator