I'm struggling with SuperTabNavigator coz I'm not able to change the tab text's font.
My font is a OTF embedded in the application via #face-font syntax in my style sheet, and I have used this successfully in other places e.g. spark label.
Then I have defined a style for the SuperTabNavigator referencing the aformentioned font both in term of fontStyle and fontFamily.
No result achieved.
Could you please provide the correct way to change tab text's font in the SuperTabNavigator component?
Thanks in advance
Best Regards
Try to modify CSS the SuperTabNavigation
#font-face {
src:url("./fonts/YOURFONT.TTF");
fontFamily: myFont;
}
#font-face {
src:url("./fonts/YOURFONT.TTF");
fontWeight: bold;
fontFamily: myFont;
}
SuperTabNavigator {
popupButtonStyleName: "popupButton";
tabStyleName: "firefoxLikeTabs";
leftButtonStyleName: "leftButton";
rightButtonStyleName: "rightButton";
buttonWidth:20px;
font-family: "myFont";
font-size: 11;
}
Related
I it possible to use an flat icon with different content name ? I want to add new icon to existing project so I download flaticon as font icon. But its conflict previous icon set.
.flaticon-alert:before { content: "\f100"; }
Is there any way to fix it ?
The icon fonts are fonts, so for 2 icon sets that use the same character ("content") you just have to ensure that the class name also specifies the font-face:
styles.css
.flaticon-alert:before {
font-family: flaticon; // or name given in flaticon's #font-face css
}
flaticon.css example:
#font-face {
font-family: flaticon;
src: url(flaticon.woff);
}
I have created a style in which i am defining a font family.When i apply this style to label it reflects the font were as there is no change when it is applied to a spark button.I Tried various way to Apply font style but it doesn't work.Other properties work fine except font family. Even i tried creating skin class and set the font family style of label in it. While previewing the skin i can see the changes but when i apply it to button, it shows the default font. Below given code is written in a View.I had followed 2 approaches but none of them work.
Approach 1
#font-face{
src:url("HARNGTON.TTF");
fontFamily: MyF;
embed-as-cff: false;
}
<s:Button x="143" y="108" width>="471" label="Course" color="white" fontFamily="MyF"
>
Approach 2
I have created a style and i m also using skin class for button.I have not defined font family in skin class. So i hope button is not overriding the font-family from skin class i.e the default value.
#font-face{
src:url("HARNGTON.TTF");
fontFamily: MyF;
embed-as-cff: false;
}
.myFont
{
fontFamily: MyF;
}
<s:Button x="143" y="108" width="471" label="Course" color="white" styleName=myFont skinclass="MyButton_skin">
I tried using CSS file also but it is still not working.
Sample of CSS file is as follows:
/* CSS file */
#namespace s "library://ns.adobe.com/flex/spark";
#font-face{
src:url("/views/abc.ttf");
fontFamily: MyF;
fontWeight:bold;
embed-as-cff: false;
}
s|Button {
fontFamily: MyF;
color: #000000;
fontSize: 34;
}
and i used it during initialization of view
public function init():void{
styleManager.loadStyleDeclarations("Basic.swf",true);
}
But still there is no change in the font style.
This usually happens because you embed a font with normal weight. Buttons use a bold label. If you embed a font as normal, and use it as bold, it won't be rendered correctly.
Unless you specify that the embedded font is bold (in the font-family declaration, set the font-weight property to bold), it will not be added to the button label.
After looking at the code you posted, it's evident that the font-family declaration, does not define the weight of the embedded font, so Flex assumes it is set to normal. That's why you don't see the label with the embedded font.
When using fonts with Spark components you should set the embedAsCFF to true not false. False is used when embedding fonts in a legacy mx component.
pixels4nickels is right, firstly you need to set embedAsCFF : true, secondly, I do not think embed-as-cff is not the right format, should be embedAsCFF
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'm using Flex 4. I'm trying to apply a embedded font in all Alert components of the application, to get the same style that all the app, of course.
I code in my CSS file:
#font-face
{
fontFamily: "Trebuchet MS";
src: url("resources/Trebuchet MS.ttf");
embedAsCFF: true;
}
mx|Alert{
font-family: "Trebuchet MS";
}
s|ButtonBase, s|TextBase, s|TextInput, mx|Label{
font-family: "Trebuchet MS";
color:"#000000";
}
The font-family worked to all componentes, but not to the Alert component. In alert the text message and title got unvisible. If I change to other font-family it works correctly, just the embedded font doesn't work on Alert component. Anyone got this problem?
Obs: The embedded font worked in all the app, just the Alert no.
Notice that Alert is a MX component, not a Spark component.
MX components don't handle Device 4 fonts by default.
To make it work, you have to change the textFieldClass for MX components :
mx|global
{
textFieldClass: ClassReference("mx.core.UIFTETextField");
}