Unable to use "HelveticaLtEx" font.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" fontFamily="Arial" fontSize="12"
xmlns:ilog="http://www.ilog.com/2007/ilog/flex"
xmlns:local="c7.views.apps.calendar.*"
backgroundColor="#FFFFFF">
<mx:Style>
#font-face {
src:url("assets/cloud_main/font/HelveticaNeueLTStd-LtEx.otf");
fontFamily: HelveticaLtEx;
}
.dateStyle{
font-family: "HelveticaLtEx";
fontSize: 18;
}
</mx:Style>
<mx:Canvas>
<mx:VBox>
<mx:Label text="testing testing testing" styleName="dateStyle"/>
</mx:VBox>
</mx:Canvas>
</mx:Application>
The bold and italics properties must match the properties of the font itself.
Try these styles and see what happens :
.dateStyle{
font-family: "HelveticaLtEx";
fontSize: 18;
fontWeight:bold;
}
Or :
.dateStyle{
font-family: "HelveticaLtEx";
fontSize: 18;
fontStyle:italic;
}
Or :
.dateStyle{
font-family: "HelveticaLtEx";
fontSize: 18;
fontWeight:bold;
fontStyle:italic;
}
It will work for you, if not, let me know and we'll try something else...
Related
My flex (4.5) application uses MX and Spark components.
I want to embed Arial fonts and I a mgetting crazy: it works for either Spark components, either for MX components but never for both.
Sometimes some components just diseappear, or both are bold etc !
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" layout="absolute" xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace s "library://ns.adobe.com/flex/spark";
#font-face {
src: url("c:/windows/fonts/arial.ttf");
fontFamily: Arial;
fontWeight:normal;
embed-as-cff: true;
}
#font-face {
src: local("Arial");
font-weight: normal;
fontFamily: Arial;
fontStyle:normal;
embed-as-cff:false;
}
#font-face {
src: local("Arial");
fontFamily: Arial;
fontWeight:bold;
fontStyle: normal;
embed-as-cff:false;
}
</mx:Style>
<mx:Label x="177" y="160" text="mx|normal"/>
<mx:Label x="177" y="201" fontWeight="bold" text="mx|bold"/>
<s:Label x="182" y="235" text="S|normal"/>
<s:Label x="182" y="278" text="S|bold" fontWeight="bold"/>
Remove the font styles that say: embedAsCFF: false and add the following:
mx|global {
textFieldClass: ClassReference("mx.core.UIFTETextField");
}
This will force all mx components that render text to use a textfield that can handle the CFF embedded fonts. It also has the advantage that you don't have to embed the same font twice.
Short example to describe the problem. Set up a usual Flex mobile project with the following files (and OpenSans font).
Main.mxml
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
applicationDPI="160">
<s:layout><s:VerticalLayout/></s:layout>
<fx:Style source="style.css"/>
<s:Label text="Static Label"/>
<s:Button label="Static Button" skinClass="MyButtonSkin"/>
</s:Application>
style.css
#namespace s "library://ns.adobe.com/flex/spark";
#font-face {
src: url("fonts/opensans/OpenSans-Bold.ttf");
fontFamily: OpenSansBoldEmbedded;
embedAsCFF: true;
}
s|Label,
s|Button
{
fontFamily: OpenSansBoldEmbedded;
font-lookup: embeddedCFF;
}
MyButtonSkin.mxml
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:Label id="labelDisplay" />
</s:Skin>
The result is that the simple label is styled with the embedded font, but the label in the button isn't. So it looks like this: http://img813.imageshack.us/img813/44/skinningtest.png
I've tried other CSS properties like color and font-size and it works for both. Only the embedded fonts won't work in Spark skins.
What do I miss to style the label in the button with the embedded font?
Solution
Use the attributes fontWeight and fontStyle at the import (#font-face) and on usage (.OpenSansEmbeddedBold). It's not enough to embed the bold font and use it.
/* Import the different font weights and styles */
#font-face {
src: url("fonts/opensans/OpenSans-Regular.ttf");
fontFamily: OpenSansEmbedded;
}
#font-face {
src: url("fonts/opensans/OpenSans-Bold.ttf");
fontFamily: OpenSansEmbedded;
fontWeight: bold;
}
#font-face {
src: url("fonts/opensans/OpenSans-Italic.ttf");
fontFamily: OpenSansEmbedded;
fontStyle: italic;
}
#font-face {
src: url("fonts/opensans/OpenSans-BoldItalic.ttf");
fontFamily: OpenSansEmbedded;
fontWeight: bold;
fontStyle: italic;
}
/* Register fonts as styleNames for further use */
.OpenSansEmbedded
{
fontFamily: OpenSansEmbedded;
}
.OpenSansEmbeddedBold
{
fontFamily: OpenSansEmbedded;
fontWeight: bold;
}
.OpenSansEmbeddedItalic
{
fontFamily: OpenSansEmbedded;
fontStyle: italic;
}
.OpenSansEmbeddedBoldItalic
{
fontFamily: OpenSansEmbedded;
fontWeight: bold;
fontStyle: italic;
}
Use the defined classes as styleName in your MXML
<s:Label text="Static Label" styleName="OpenSansEmbeddedBold"/>
I don't know exactly why, but try adding fontWeight: normal; in your css and this will help. I came to this conclusion after changing fontFamily to Verdana and seeing that button label was bold.
for the button you should use embedAsCFF: false
#namespace s "library://ns.adobe.com/flex/spark";
#font-face {
src: url("fonts/opensans/OpenSans-Bold.ttf");
fontFamily: OpenSansBoldEmbedded;
embedAsCFF: true;
}
#font-face {
src: url("fonts/opensans/OpenSans-Bold.ttf");
fontFamily: OpenSansBoldEmbeddedForBtn;
embedAsCFF: false;
}
s|Label
{
fontFamily: OpenSansBoldEmbedded;
font-lookup: embeddedCFF;
}
s|Button
{
fontFamily: OpenSansBoldEmbeddedForBtn;
}
Despite setting the labelRotation property to 90 in this column chart, the axis labels are horizontal. Is there something additional I need to do?
<mx:ColumnChart id="myChart" height="100%" width="100%"
dataProvider="{myData}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis id="h1" categoryField="code"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{h1}" labelRotation="90" />
</mx:horizontalAxisRenderers>
<mx:series>
<mx:ColumnSet type="stacked"
allowNegativeForStacked="true">
<mx:series>
<mx:ColumnSeries xField="code"
yField="A"
displayName="A"/>
<mx:ColumnSeries xField="code"
yField="B"
displayName="B"/>
<mx:ColumnSeries xField="code"
yField="C"
displayName="C"/>
<mx:ColumnSeries xField="code"
yField="D"
displayName="D"/>
<mx:ColumnSeries xField="code"
yField="F"
displayName="F"/>
</mx:series>
</mx:ColumnSet>
</mx:series>
</mx:ColumnChart>
EDIT: I tried embedding the font, as suggested by Amy and fotomut, but it didn't do anything:
<mx:Style>
#font-face
{
src:url("../assets/fonts/FRABK.ttf");
fontFamily: myFontFamily;
embedAsCFF: false;
}
ColumnChart
{
fontFamily: myFontFamily;
fontSize: 10;
}
</mx:Style>
The key to making the labelRotation work is embedding of fonts.
There is a good article on Flex 4.6 here
A simple code example would be to add a style to the mxml file,
<fx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face{
src: local("Arial");
fontFamily: Arial;
embedAsCFF: false;
}
mx|ColumnChart {
fontFamily: Arial;
fontSize: 10;
}
</fx:Style>
EDIT:
I confirmed that this works for me using Flex 3.5, by simply changing fx:Style to mx:Style
<mx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face{
src: local("Arial");
fontFamily: Arial;
embedAsCFF: false;
}
mx|ColumnChart {
fontFamily: Arial;
fontSize: 10;
}
</mx:Style>
Perhaps you should try embedding Arial like this first to see if that works?
Embed the font used on that label. If for some reason you can't embed the font, sometimes setting the blendMode to "layer" will work.
I think Adobe are messing with me, from all the docs and tutorials it seems like styling a simple button got much more difficult in Flex 4 (Spark). I used to be able to have my designer create the CSS as it wasn't too far off from web standard CSS. Now it seems like I need to make a skin first as outlined in this post?
Below is the old button style.
Button {
fontFamily: "Arial, Helvetica";
fontWeight: bold;
fontSize: 11px;
paddingTop: 0px;
paddingBottom: 0px;
highlightAlphas: 0.42, 0.13;
fillAlphas: 1, 1, 1, 1;
fillColors: #B9DEF8, #9AC3EB, #B9DEF8, #9AC3EB;
color: #477199;
textRollOverColor: #477199;
textSelectedColor: #3399cc;
borderStyle: none;
}
thanks!
Skinning the Spark Button would be a programmatic approach to which you could mimic the Halo mx:button very closely.
If you just wanted your application to use the Halo theme, you could use Halo theme.
It's also important to note mx:Button included things like icon, which Spark Button does not.
As you denote you want to use CSS only, you'll have to dive in to mx skin class at:
mx.skins.halo.ButtonSkin
Spark theme:
Halo theme:
Based upon your CSS for spark:
<?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"
minWidth="955"
minHeight="600">
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
s|Button
{
fontFamily: "Arial, Helvetica";
fontWeight: bold;
fontSize: 11px;
paddingTop: 0px;
paddingBottom: 0px;
highlightAlphas: 0.42, 0.13;
fillAlphas: 1, 1, 1, 1;
fillColors: #B9DEF8, #9AC3EB, #B9DEF8, #9AC3EB;
color: #477199;
textRollOverColor: #477199;
textSelectedColor: #3399cc;
borderStyle: none;
}
</fx:Style>
<s:VGroup width="100%"
height="100%"
paddingTop="10"
paddingLeft="10">
<s:Button label="Hello, world!" />
<mx:Button label="Hello, world!" />
</s:VGroup>
</s:Application>
Yes, it is possible.
Check out the styles on the Spark Button to find out what can be modified using CSS.
Good morning,
I face a curious bug as I try to set a fontstyle in a mx:Panel object in Flex.
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
layout="absolute" title="Test"
titleStyleName="titleAssumed" >
<mx:Label x="0" y="-5" styleName="othersAssumed" />
<mx:Label x="0" y="16" styleName="othersAssumed"/>
The associated CSS file contains the following relevant styles:
/* CSS file */
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face{
src: url("ttf\\ControlSign Bold.ttf");
fontFamily: ControlSign;
fontWeight: bold;
}
#font-face{
src: url("ttf\\ControlMono Regular.ttf");
fontFamily: ControlMono;
}
.titleAssumed
{
fontFamily: ControlSign;
font-weight: bold;
font-size: 12;
color: #FFFFFF;
}
.othersAssumed
{
fontFamily: ControlMono;
font-size: 15;
color: #ADADAD;
}
With this configuration, and once I have set the compiler properties in Eclipse for the compiler to use the Flash text engine for MX components, I can see the two labels of the Panel in the correct font and style ; but the Panel's title will not show up. Even if I add the "embedAsCff: false" line to my style .titleAssumed, the title refuses to show up.
Any idea about what could be causing the trouble? Thanks !
EDIT: syntax error fixed.
You need to set embedAsCFF: true in your font. Also you have a syntax error where you are not closing your curly brackets on the fonts. Below is an example and here are some more.
#font-face{
src: url("ttf\\ControlSign Bold.ttf");
fontFamily: ControlSign;
fontWeight: bold;
embedAsCFF: true;
}