I've tested this snippet with 3 different TTF fonts and I still din't get #font-face working within Flex. Am I missing something here?
Tried both absolute and relative paths on url(), no changes. If I use any standard font (Arial, Verdana, Tahoma...), the Hello World! text appears, but when I try to use any external font, nothing shows.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:Style>
#font-face {
src: url(josefin-sans.ttf);
fontFamily: JosefinSans;
}
.custom {
fontFamily: JosefinSans;
fontSize: 36pt;
}
</mx:Style>
<mx:Text id="text" styleName="custom" text="Hello World!" />
Compiled with:
mxmlc -static-link-runtime-shared-libraries=true flex.mxml
As you are using MX components, you should embed fonts with embedAsCFF: false; flag.
#font-face
{
src: url("josefin-sans.ttf");
fontFamily: "JosefinSans";
fontWeight: normal;
embedAsCFF: false;
}
If it doesn't work, launch the application in debug mode and watch for errors. Also, be sure that the font you are using can be displayed with bold and italic if needed.
Related
I'm creating a cross-platform application with Nativescript and Angular.
I had a custom font icon that I want to use. I had some svg files that I turned into a ttf file. When I use the chars with their unicode code it shows nothing.
What I've done is this:
Put the ttf file on /src/fonts/icomoon.ttf (the same level of app)
Insert this code on app.css file
.ico {
font-family: icomoon, icomoon;
font-weight: normal;
}
In the home.component.html file I'm using it like this:
<!-- other stuff -->
<Label row="0" col="1" text="&#E904;" class="ico" style="color:white; margin-right:20;" (tap)="showAlert()" />
Where am I wrong? Did I miss something?
P.S.: the unicode codes go from e900 to e907
P.P.S: I've already used Fontawesome and it works with this code. Now I want to use my own font and this code doesn't work.
EDIT
I use this guide and I modified something.
In home.component.html file I have:
<Label row="0" col="1" [text]="'ico-link' | fonticon" class="ico" style="color:white; margin-right:20;" (tap)="showAlert()" />
I addedd the file app/assets/icomoon.css in which I put this:
font-family: 'icomoon';
src: url('../../fonts/icomoon');
src: url('../../fonts/icomoon') format('embedded-opentype'), url('../../fonts/icomoon') format('woff2'), url('../../fonts/icomoon') format('woff'), url('../../fonts/icomoon') format('truetype'), url('../../fonts/icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.ico {
display: inline-block;
font: normal normal normal 14px/1 icomoon;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ico-link:before {
content: "\ue904";
}
and in app.ts I added:
#NgModule({
bootstrap: [
AppComponent
],
imports: [
//...
TNSFontIconModule.forRoot({
'ico': './assets/icomoon.css'
})
]
//...
});
After all this it still doesn't work. The icon isn't show.
I have updated your playground here. It is working fine now.
In your html I am binding text like this.
<Label textWrap="true" text="{{iconmoonLbl}}" class="ico"></Label>
and in the .ts file I am using String.fromCharcode
this.iconmoonLbl = String.fromCharCode(0xe904);//'&#E904;'
I had the same issue, I notice that it is required to use the whole format , then I moved to that awesome icon plugin.
Try
<Label row="0" col="1" text="" class="ico" style="color:white; margin-right:20;" (tap)="showAlert()" />
Also, remember that Android and IOs handle naming different, please check with using the new docs.
Note: In iOS your font file should be named exactly as the font name. If you have any doubts about the original font name, use the Font Book app to get the original font name.
Icon Fonts Nativescript/Angular
I spent a few days to find solution to solve this problem. Before using spark label, im use mx label, and text with small size (textSize:11) looks clear. After change component on spark label, text looks blurry, not soo clear. Im embed font from my system. Font name is Tahoma. Changing values like cffHinting dont give me any result. I'm use flashDevelop, but same result in IDEA and FlashBuilder. I cant post screenShot bicouse of my small reputation level. Help me please find right solution.
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face{
src:url("Tahoma.ttf");
font-family:TahomaS;
embedAsCFF: true;
}
#font-face{
src:url("Tahoma.ttf");
font-family:TahomaMX;
embedAsCFF: false;
}
s|Label
{
font-family:TahomaS;
font-size:11;
color: #5c5c5c;
}
mx|Label
{
font-family:TahomaMX;
font-size:11;
color: #5c5c5c;
}
And code from Main.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Style source="Fonts.css"/>
<s:Label x="50" y="50" text="XYZ Corporation Directory" cffHinting="none" />
<mx:Label x="50" y="65" text="XYZ Corporation Directory" />
</s:Application>
I think that blurry effect and size label text change is because that your flex compiler can't locate the specified font, so it use the default font.
1 - use local() to locate local font like this :
#font-face {
src: local("Tahoma");
fontFamily: "TahomaS";
embedAsCFF: true;
}
s|Label {
fontFamily: "TahomaS";
fontSize: 44;
}
2 - create a flex config file local-font-config.xml in your src/ folder and specify your font path :
<?xml version="1.0" encoding="utf-8"?>
<flex-config>
<compiler>
<fonts>
<local-font-paths>
<path-element>/System/Library/Fonts/</path-element>
</local-font-paths>
</fonts>
</compiler>
</flex-config>
3- give to your flex compiler the location of your config file :
-load-config+=local-font-config.xml
... i think that the best way to use fonts is to use it as a project resources, so you avoid additional configurations
Just create an src/assets/fonts folder in your project and put in your fonts
and in your css file just do this :
#font-face {
src:url("assets/fonts/Tahoma.ttf");
fontFamily: "TahomaS";
embedAsCFF: true;
}
s|Label {
fontFamily: "TahomaS";
fontSize: 44;
}
I'm trying to embed multiple fonts in a spark RichText component but not sure how to go about it. I'm wanting to be able to display bold font using tags in HTML. With the font i'm using, the regular and bold character sets are in different .ttf files.
Can I set more than one font family in CSS for a component?
Here is my stylesheet so far...
#font-face {
src: url("/styles/fonts/FontRg.ttf");
fontFamily: FontRg_CFF;
fontStyle: normal;
fontWeight: normal;
embedAsCFF: true;
}
#font-face {
src: url("/styles/fonts/FontRgBd.ttf");
fontFamily: FontRgBd_CFF;
fontStyle: normal;
fontWeight: normal;
embedAsCFF: true;
}
s|RichText{
font-family: FontRg_CFF;
font-size: 16;
}
Thanks for any help!
Though this post is pretty old, I just had the same issue and could figure out how it works:
You will have to change the following in order to display the bold text:
#font-face {
src: url("/styles/fonts/FontRgBd.ttf");
fontFamily: FontRg_CFF;
fontStyle: normal;
fontWeight: bold;
embedAsCFF: true;
}
So, fontFamily and fontWeight need to be changed like you see above. Both embeds need to share the same fontFamily name whereas the bold font needs to have the fontWeight being set to "bold".
You can then simply use b-tags (<b>BOLD</b>) to display bold text within Flex RichText or TextArea.
I notice that in both of your font declarations you have only embedded the normal weight. Try another font declaration for the bold version.
I'm trying to embed a font using css on in my flex project via CSS:
#font-face {
src: url("/slimCurves.ttf");
fontFamily: SlimCurves;
embedAsCFF: true;
font-weight:normal;
}
.slimCurves
{
fontFamily: SlimCurves;
fontLookup: embeddedCFF;
fontSize: 15px;
}
When I try to apply the style to a text input field the input field looses its existing style, but doesn't seem to inherit the custom one.
<s:TextInput width="100%" fontSize="33" text="test" styleName="slimCurves"/>
If I apply the same style to a label, the label shows the text in the custom font as would be expected. Any ideas?
Looks like this had something to do with the selected theme. Selecting a different template seems to have resolved this issue.
I think the problems is due to the fact that Buttons Text is by default in BOLD.
You are creating only the normal Font and not the bold one.
I usually use this code:
#font-face{
src: url("FONT.TTF");
fontFamily: DAX2;
font-weight:normal;
}
#font-face{
src: url("FONT.TTF");
fontFamily: DAX2;
font-weight:bold;
}
Kind regards,
Claudio
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;
}