I have a QML app that's using a font family that has 5 weights—Light/Regular/Medium/Bold/Black—and 3 styles: Normal, Italic, and Condensed.
When I load both a 'normal' and 'condensed' style of the same weight they share the same family name; whichever style was loaded first is what is used:
FontLoader { source:"qrc:/fonts/DINPro-CondRegular.otf"; id:cond }
FontLoader { source:"qrc:/fonts/DINPro-Regular.otf"; id:norm }
Timer { running:true; onTriggered:console.log(id:norm.name==cond.name) } // outputs `true`
// This ends up using the condensed flavor
Text { text:'hi mom'; font { family:'DINPro' } }
Is there some way to tell a Text object to use a specific font file or FontLoader instance? There's an italic property for italic style, but no property for the 'condensed' flavor.
How can I use both normal and condensed styles of the font in the same document, and specify which to use for different Text?
I've found that for this particular font I can use the styleName property to control the various flavors. I just kept trying various style strings until I found ones that worked.
FontLoader { source:"qrc:/fonts/DINPro-Regular.otf" }
FontLoader { source:"qrc:/fonts/DINPro-CondRegular.otf" }
FontLoader { source:"qrc:/fonts/DINPro-CondMedium.otf" }
Text { text:'norm'; font { family:'DINPro'; styleName:'Regular' } }
Text { text:'bold'; font { family:'DINPro'; weight:Font.Bold; styleName:'Regular' } }
Text { text:'blak'; font { family:'DINPro'; weight:Font.Black; styleName:'Regular' } }
Text { text:'cond norm'; font { family:'DINPro'; styleName:'CondRegular' } }
Text { text:'cond bold'; font { family:'DINPro'; styleName:'CondBold' } }
Text { text:'cond blak'; font { family:'DINPro'; styleName:'CondBlack' } }
It feels like it's held together with tape and string, but it's working. If someone has a more robust way to handle this—especially to know exactly what strings will work for the styleName—I'll happily accept that answer instead of this one.
Related
Everyone knows about how to set a background for Buttons, Popups etc via the background property of these elements. But I am wondering, how can I create such a property myself for my own custom elements? I found a way but it looks pretty ugly and I can't seem to find the qml code for Button, Popup etc where said property is defined. So i played a bit and came up with the idea of using Bindings like this:
Item {
id: root
property Item background: Rectangle {
color: "red"
}
Binding {
target: root.background
property: "parent"
value: root
}
Binding {
target: root.background
property: "anchors.fill"
value: root
when: root.background.parent == root
delayed: true
}
}
As mentioned that looks pretty tiresome if you need to declare a lot of properties of the child. So, how does Qt do it or what is the proper way of doing it?
// ItemWithBackground.qml
Item {
property alias background: backgroundLoader.sourceComponent
Loader {
id: backgroundLoader
anchors { fill: parent }
sourceComponent: Rectangle { color: 'red' } // default background implementation
}
}
// Usage example:
ItemWithBackground {
background: Rectangle {
color: 'green'
}
}
If you’re on a recent Qt version, have a look at using inline components. They allow you to create API’s like this easily.
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);
}
What's the best way to increase font size of PNotify notifications ?
new PNotify({
title: "Title",
text: "Some information more.",
type: "notice"
})
From here
I don't see any built-in way to do that. You should add addclass: "someClass" to the initialization and then change the font size by writing .someClass .ui-pnotify-text { font-size: 1.25em } for the description text and .someClass .ui-pnotify-title { font-size: 1.25em } for the title into your custom CSS file.
I have a QtQuick/QML 5.6 project where I need to load 45 .ttf files representing weight variations of different (related) font families.
For example, here is a subset of the font files (three weights for two families):
EncodeSans-Thin.ttf
EncodeSans-Regular.ttf
EncodeSans-Bold.ttf
EncodeSansNarrow-Thin.ttf
EncodeSansNarrow-Regular.ttf
EncodeSansNarrow-Bold.ttf
I have added all 45 .ttf files to a .qrc in my project, but when I try to use the font family, it does not work:
Text { text:"So Thin"; font.family:"Encode Sans"; font.weight:Font.Thin }
Text { text:"Fatty"; font.family:"Encode Sans"; font.weight:Font.Bold }
If I add a single font loader for one font in each family, however, it works, for all weight variations of that font
FontLoader { source:"qrc:/fonts/EncodeSans-Regular.ttf" }
FontLoader { source:"qrc:/fonts/EncodeSansNarrow-Regular.ttf" }
Text { text:"So Thin"; font.family:"Encode Sans"; font.weight:Font.Thin }
Text { text:"Fatty"; font.family:"Encode Sans"; font.weight:Font.Bold }
I am surprised by this. It certainly appears to be using EncodeSans-Thin.ttf for the thin weight and EncodeSans-Bold.ttf for the bold weight, despite never mentioning those files in any FontLoader.
Edit: the above code does NOT work. Due to a separate bug I now know that Font.Thin was never working (was showing the Regular weight), and it's possible that bold was being simulated by the text renderer.
Am I supposed to add 45 FontLoader to my project, one for each TTF? Or is there a way to get all the TTF to be loaded with no need for FontLoader?
Repeater {
id: repeater
property var fontList: [] // e.g. Qt.resolvedUrl("qrc:///fonts/EncodeSans-Regular.ttf"), or load a list from resource/config files
model: ListModel {
id: listModel
}
FontLoader {
source: model.source
}
Component.onCompleted: {
for (var i = 0; i < fontList.length; i++) {
listModel.append({ source: fontList[i] })
}
}
}
edit: Given a list of strings and URLs you can use a repeater to load many fonts. Component.onCompleted: the script reads the list of URLS to load fonts from, and adds all of them to the list. Since the repeater model is a ListModel, the repeater will create new items when added to ListModel. Repositioning is also available to repeaters this way, but not used here.
Note: Loading the list of URLs is not given in this snippet.
My web application uses Arial as default font. But in a single place, the font family is ignored:
As you can see the labels on the left use Arial but in the popup DIV, it uses a serif font (probably New Roman Times, I'm not sure.)
I've styled the td directly and the content of the td is just an empty span plus the text.
When I toggle the checkboxes on the right, eventually IE9 will recalculate the styles and apply them properly.
Does anyone have any idea why IE ignores the CSS here?
Details: IE 9.0.29, Windows 7, ZK 6.5 as UI framework.
I've found these solutions but I don't know why they work when inheritance didn't:
.z-comboitem-text {
font-family: Arial !important;
}
or
tr td.z-comboitem-text {
font-family: Arial;
}
or using an inline style. If you use ZK 6, then use this code:
if( ZKUtils.isIE( 9 ) ) {
item.setWidgetListener( "onBind", "jq(this).find('.z-comboitem-text').css('font-family', 'Arial')" );
}
public static boolean isIE( int version ) {
Execution zkEnv = Executions.getCurrent();
if( ! "ie".equals( zkEnv.getBrowser() ) ) {
return false;
}
int actualVersion = zkEnv.getBrowser( "ie" ).intValue();
return version == actualVersion;
}