[jira] [Created] (FLEX-34348) Embed Font using @font-face in Flex SDK4.11

["Mohanraj N (JIRA)" <ji...@apache.org>]

Mohanraj N created FLEX-34348:
---------------------------------

             Summary: Embed Font using @font-face in Flex SDK4.11
                 Key: FLEX-34348
                 URL: https://issues.apache.org/jira/browse/FLEX-34348
             Project: Apache Flex
          Issue Type: Bug
    Affects Versions: Apache Flex 4.11.0
            Reporter: Mohanraj N


I am trying to load external stylesheet via styleManager.loadStyleDeclarations() method, the embedded font in stylesheet is not getting reflected in my application. But if I use <fx:Style> tag inside application with same contents available in stylesheet, the embedded font is getting reflected. I am using Flex4.11 SDK.

Sample I worked out is listed below,

EmbedFont.css:
------------------
     @namespace s "library://ns.adobe.com/flex/spark";
	 @namespace mx "library://ns.adobe.com/flex/mx";

       @font-face {
		   src: url("font/GOTHICB.ttf");
		   fontFamily: centuryGothicBold;
		   advancedAntiAliasing: true;
		   embedAsCFF: true;
		   fontWeight: bold;
		}
		
.mypanelTitle {
		   color: #b56a00;
		   fontFamily: centuryGothicBold;
		   fontSize: 12;
		}
          

EmbeddedFontFace.mxml:
---------------------------------
<?xml version="1.0"?>
<!-- fonts/EmbeddedFontFace.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="init()"  width="100%">
	
	<fx:Script>
		<![CDATA[
		import mx.styles.StyleManager;

		private function init() : void {
			var styleLoadEvent:IEventDispatcher = StyleManager.loadStyleDeclarations("EmbedFont.swf",true);    // If I use this, embedded Font is not applying to 'myPanel' component
		}
			
		]]>
	</fx:Script>

 <!-- <fx:Style>					<!--    If I use this instead of StyleManager class, embedded Font is applying to 'myPanel' component -->
     	@namespace s "library://ns.adobe.com/flex/spark";
	@namespace mx "library://ns.adobe.com/flex/mx";

      	 @font-face {
		   src: url("font/GOTHICB.ttf");
		   fontFamily: centuryGothicBold;
		   advancedAntiAliasing: true;
		   embedAsCFF: true;
		   fontWeight: bold;
		}
		
	.mypanelTitle {
		   color: #b56a00;
		   fontFamily: centuryGothicBold;
		   fontSize: 12;
		}
          
  </fx:Style>  -->
   

  <s:Panel id="myPanel" title="Embedded Font Applied With Type Selector" styleName = "mypanelTitle" horizontalCenter="0" >
     <s:VGroup>
        <s:RichText width="250"  >
            <s:text>
                The text in this RichText control uses the font set on the VGroup.
            </s:text>
        </s:RichText>
     </s:VGroup>
  </s:Panel>
    
</s:Application>

Please let me know anything I missed out using styleManager.loadStyleDeclarations(). Kindly revert back to me asap.




--
This message was sent by Atlassian JIRA
(v6.2#6252)