The -fx-font-style JavaFX CSS Property gives developers the opportunity to create italicized text, through access to a specific italic font. It roughly corresponds to the web CSS property font-style, although it does not support the entire CSS syntax.

Required parameters:

-fx-font-style only needs one parameter, which should be defined from the allowed values

ParameterDescriptionValue
<font-style>The style of font to be rendered[ normal | italic | oblique ]

Behaviour

In web CSS, italic and oblique font styles are separate, and represent the following situations:

  • Italic: A specific italicized font with dedicated italic glyphs
  • Oblique: a geometric transformation of the regular font to create a synthetic slanted effect

In JavaFX, this is not supported. If an italic font style is available, both the italic and oblique keywords will select that style. If no italic font is available, it will not be synthesised and the font style will be rendered as normal.

Note that the ‘l’ here for each italic and oblique font is different from the ‘normal’ font. Both use the glyphs from the specialised italic font.

Syntax

-fx-font-style: normal;
-fx-font-style: italic;
-fx-font-style: oblique;

The JavaFX CSS interpreter isn’t a fully-compliant CSS Interpreter, nor does it support all CSS-values you might expect for the related CSS property.

The -fx-font-style CSS property can have the following values:

ValueDescription
normalText rendered with no italicisation
italicRender a specialised italic font, if available
obliqueRender a specialised italic font, if available

Example

CSS:

@font-face{
  font-family: 'Droid Serif';
  font-weight: 400;
  src: url('../fonts/DroidSerif/DroidSerif-Regular.ttf') format('truetype');
}

@font-face{
  font-family: 'Droid Serif';
  font-weight: 400;
  font-style: italic;
  src: url('../fonts/DroidSerif/DroidSerif-Italic.ttf') format('truetype');
}

.root{
    -fx-font-family: 'Droid Serif';
    -fx-font-size: 18pt;
}

.title{
    -fx-font-family: initial;
    -fx-background-color: #fcc200;
    -fx-font-weight: bold;
}

.normal{
    -fx-font-style: normal;
}

.italic{
    -fx-font-style: italic;
}

.oblique{
    -fx-font-style: oblique;
}

FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<VBox alignment="TOP_CENTER" prefHeight="250.0" prefWidth="475.0" stylesheets="@../css/styleStyles.css" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1">
    <Label alignment="CENTER" maxWidth="800" styleClass="title" text="Font example" />
    <GridPane alignment="CENTER_LEFT" vgap="10" hgap="10" VBox.vgrow="ALWAYS">
        <Label text="Normal"/>
        <Label styleClass="normal" text="abcdefghijklmnopqrstuvwxyz" GridPane.columnIndex="1"/>
        <Label text="Italic" GridPane.rowIndex="1"/>
        <Label styleClass="italic" text="abcdefghijklmnopqrstuvwxyz" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
        <Label text="Oblique" GridPane.rowIndex="2"/>
        <Label styleClass="oblique" text="abcdefghijklmnopqrstuvwxyz" GridPane.rowIndex="2" GridPane.columnIndex="1"/>
        <rowConstraints>
            <RowConstraints percentHeight="33"/>
            <RowConstraints percentHeight="33"/>
            <RowConstraints percentHeight="33"/>
        </rowConstraints>
    </GridPane>
    <padding>
        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
    </padding>
</VBox>

See Also