Are more font variants in the pipeline?

David Grieve david.grieve at oracle.com
Thu Aug 23 06:01:50 PDT 2012


In this particular case, the parser is explicitly looking for the font syntax. 

Value lookup doesn't work everywhere. In its current state, it works mostly with size values and paints. But even then, there are some holes where it doesn't work. 

You might want to use multiple style classes. 

.my-favourite-font { -fx-font: 15px "Open Sans"; }

Then,

Button button = new Button("Easy");
button.getStyleClass().add("my-favourite-font");


On Aug 23, 2012, at 8:08 AM, Randahl Fink Isaksen wrote:

> The Tip from Daniel actually made me think I discovered a bug in the CSS parser. Daniels advice is to create my own font variable like this
> 
> .root {
> 	-my-favourite-font: 15px "Open Sans";
> }
> 
> and then use this variable all over my CSS file instead of the font name itself
> 
> .button {
> 	-fx-font: -my-favourite-font;
> }
> 
> But much to my surprise, this indirect way of specifying the font does not seem to be supported. I am force to write
> 
> .button {
> 	-fx-font: 15px "Open Sans";
> }
> 
> which means I get the "Open Sans" choice spread out all over my file. I am surprised, because using variables this way works for other CSS properties like -fx-effect.
> 
> Anyone got a clue, or should I just file a bug report?
> 
> Randahl
> 
> 
> 
> 
> 
> On Aug 20, 2012, at 16:19 , Randahl Fink Isaksen <randahl at rockit.dk> wrote:
> 
>> Thanks for your tip Daniel, I ended up using it :-)
>> 
>> Randahl
>> 
>> 
>> On Aug 18, 2012, at 1:17 , Daniel Zwolenski <zonski at gmail.com> wrote:
>> 
>>> As a wirk around, you could always use a variable in your CSS to keep the font declaration in one place. Create something like -my-light-emphasis-font at the top of your css file and then reference that in your actual CSS class font values everywhere. 
>>> 
>>> Alternatively you could define an additional 'my-light-emphasis' style class in your CSS and then add that class to your elements as needed. Styles are cumulative so you can add multiple classes to one node. 
>>> 
>>> node.getStyleClass().addAll("my-nodes-style", "my-light-emphasis");
>>> 
>>> Where the first style could define things specific to that node (like font size, borders, colours, etc) and the second one is your app wide way of 'lightly emphasizing' something which in your case is to make it semi bold. 
>>> 
>>> Using this approach is better because you could change any attribute of the light emphasis style should you want to (eg maybe light emphasis nodes should have a soft yellow background as well as a semi bold font).
>>> 
>>> It is a little naff that you have to set two styles in the code, effectively moving styling choices into the code where they don't usually belong (ie the decision to lightly emphasize something is in the code but typically should be in the CSS unless it's data driven). 
>>> 
>>> If we'd had a more OO style of styling you could have avoided this CSS leakage into code but now I'm starting to get on my rant. The way above is the standard web way (eg twitter bootstrap uses this heavily) and we've taken web land's model so we should probably take their strategies too. 
>>> 
>>> 
>>> On 18/08/2012, at 1:30 AM, Randahl Fink Isaksen <randahl at rockit.dk> wrote:
>>> 
>>>> Yes Richard, I am able to load the font properly using code like this:
>>>> 
>>>>     URL openSansSemiboldUrl = getClass().getResource("/fonts/OpenSans-Semibold-webfont.ttf");
>>>>     Font openSansSemiboldFont = Font.loadFont(openSansSemiboldUrl.toString(), 12);
>>>> 
>>>> The font is loaded just fine, and it even has properties telling that it is the semibold variant I have loaded.
>>>> 
>>>> What I don't get is, why was the support for styling with these variants abandoned from JavaFX 1.x to 2.x? If you look here, you will see that constants like SEMI_BOLD, LIGHT etc. used to be supported:
>>>> 
>>>> http://docs.oracle.com/cd/E17802_01/javafx/javafx/1.1/docs/api/javafx.scene.text/javafx.scene.text.FontWeight.html
>>>> 
>>>> As Phil just mentioned, I can also style my App with the font using a full font name like this
>>>> -fx-font-family: "Open Sans Semibold";
>>>> But the problem with this approach is, I get the font family dependency spread out over all of my CSS code (many lines containing "Open Sans").
>>>> 
>>>> In stead I was hoping to be able to just style my application using 
>>>> -fx-font-weight: semibold;
>>>> thereby only choosing the "Open Sans" font once, and letting different part of my app use different weights.
>>>> 
>>>> Again, I do not get why support for this was removed from JavaFX.
>>>> 
>>>> Yours
>>>> 
>>>> Randahl
>>>> 
>>>> 
>>>> 
>>>> On Aug 17, 2012, at 16:50 , Richard Bair <Richard.Bair at oracle.com> wrote:
>>>> 
>>>>> Are you able to get the font in Extrabold from within Java code? That is, do you know the problem is CSS or is it in the platform itself?
>>>>> 
>>>>> Thanks
>>>>> Richard
>>>>> 
>>>>> On Aug 17, 2012, at 6:48 AM, Randahl Fink Isaksen wrote:
>>>>> 
>>>>>> I noticed that the current CSS implementation only supports regular fonts, italic fonts, and bold fonts.
>>>>>> 
>>>>>> Many modern fonts come in more variants – Open Sans, for instance, comes in variants 
>>>>>> Light, Regular, Italic, Light Italic, Bold, Extrabold, Semibold, Bold Italic, Extrabold Italic, and Semibold Italic. 
>>>>>> 
>>>>>> Have I overlooked something or am I right that it is impossible to style a JavaFX app using CSS and get one of these variants, say, Open Sans Semibold?
>>>>>> 
>>>>>> Randahl
>>>>>> 
>>>>>> 
>>>>> 
>>>> 
>> 
> 


David Grieve | Principal Member of Technical Staff
Mobile: +16033121013 
Oracle Java Client UI and Tools
Durham, NH 03824 
 Oracle is committed to developing practices and products that help protect the environment



More information about the openjfx-dev mailing list