I'm having a problem embedding fonts with the Open Source Flex 4.5 SDK (Hero), although am having the same issues with Flex 4 Open Source SDK. I've added some ttf files to the assets directory of my project structure and am trying to access the fonts in my CSS file as follows:
#font-face {
src: url("../assets/DroidSans.ttf");
fontFamily: DroidSans;
embedAsCFF: true;
}
This particular font is required to be used for a number of spark controls throughout the project (this is why embedAsCFF is set to true though I believe this parameter is optional anyway). However none of the spark components display this font when it's set in their fontFamily property. I get this error on compiling for every spark component I attempt to set the font on:
warning: incompatible embedded font
'DroidSans' specified for
(controlName) . This component
requires that the embedded font be
declared with embedAsCff=true.
Strangely enough the above font works with mx components even though embedAsCFF is set to true (from what I've looked up on this subject this should be set to false for mx components and true for spark).
The above code also works in Flash Builder, however, this project needs to be developed using the Open Source SDK, where it fails.
Any ideas? Surely someone else has had the same problem?
When running the following script, it shows that the fonts are "embedded", however, just not as "CFFEmbedded". The adobe documentation says these need to say "CFFEmbedded"
var fontArray:Array = Font.enumerateFonts(false);
trace("Fontarray length: " + fontArray.length);
for(var j:int = 0; j < fontArray.length; j++) {
var thisFont:Font = fontArray[j];
trace("FONT " + j + ":: name: " + thisFont.fontName + " embedded as type:" + thisFont.fontType + ".");
}
Thanks
Bob
[EDIT]
OK - I have finally managed to embed the font. I have tried SWC's from CS4, SWC's from Flash Builder 4, SWF's from both CS4 and Flash Builder....
Eventual fix
1) Package the font into a SWF in Flash Builder 4
2) Reference the compiled SWF using the following CSS
#font-face {
cff: false;
src: url('../bin/DroidSansFont.swf');
fontFamily: DroidSansMX;
}
#font-face {
cff: true;
src: url('../bin/DroidSansFont.swf');
fontFamily: DroidSans;
}
The crazy thing is - the use of the "cff: true" directive. All the documentation says to use "embedAsCFF". This throws an error, while using the "cff" attribute - it seems to work.
I have no idea - can anyone chime in with some ideas?
Probably you are using older SDK and compiler, "cff" was renamed to "embedAsCFF" in latest SDK builds, starting from build Flex SDK 4.0.7972 build, see this discussion http://forums.adobe.com/thread/36399 for the comment from Flex SDK engineer that proves that
I had a pretty similar issue, however I was unable to load any compiled SWF font file (Flex SDK 4.1). Finally, I was able to solve this issue using this code:
MXML:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face {
src: url("fonts/files/HelveticaNeueLTPro-Md.otf");
font-family: HelveticaNeueLTPro-Md;
embed-as-cff: true;
}
#font-face {
src: url("fonts/files/HelveticaNeueLTPro-Bd.otf");
font-family: HelveticaNeueLTPro-Bd;
embed-as-cff: true;
}
.helvetica {
font-family: HelveticaNeueLTPro-Md;
font-lookup: embeddedCFF;
}
.helveticaBold {
font-family: HelveticaNeueLTPro-Bd;
font-lookup: embeddedCFF;
}
</fx:Style>
As you see this is for the HelveticaNeue font (regular and bold) in OpenType format, but I had success with TrueType as well. The important CSS attribute was "font-lookup: embeddedCFF". Once I didn't set this, compiling worked but the embedded font was never displayed. Same goes for loading SWFs created by fontswf utility - never worked for me, too.
The problem described is probably caused by using a default set of font managers. You need to use CFFFontManager. Typically You define all four possible managers to allow some fallback. This is typically a problem of MX application trying to use spark components.
see also:http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7e09.html
and possibly: https://docs.sonatype.org/display/FLEXMOJOS/Using+Adobe+Font+Manager+to+embed+fonts
Configuration for Flexmojos follows (you can use similar for flex-config.xml files, viz link above):
<fonts>
<managers>
<manager-class>flash.fonts.JREFontManager</manager-class>
<manager-class>flash.fonts.BatikFontManager</manager-class>
<manager-class>flash.fonts.AFEFontManager</manager-class>
<manager-class>flash.fonts.CFFFontManager</manager-class>
</managers>
</fonts>
Notice the preferred manager is at the bottom.
Related
As I added webpack to my NativeScript iOS app to bundle it in preparation for release, I discovered that the various some-page.minWH600.css "qualifier" files I was using to target different screen resolutions are no longer loading. (See NativeScript docs for supporting multiple screen sizes using qualifiers)
I then refactored a bit to test for small vs medium vs large tablet screens, planning to add a .css file programmatically via...
if (mediumScreen) page.addCssFile(app.minWH600.css);
...but discovered due to the bundling of pages in webpack, page.addCssFile() doesn't work either.
Does anyone have another solution to add css classes to support different screen resolutions that works with webpack?
I can think of the obvious: using many getViewById() calls and adding either NS/js properties and or css styles (or a css class) to each view, but that's laborious and kludgey...
I'd prefer to somehow redefine the relevant css classes on the fly like I was able to before bundling with webpack, but I don't know if that is possible?
To answer my own question, because someone else may have to solve this someday, I came up with two workarounds.
Simply redefining the class using:
if (mediumScreen) page.addCss(".class {font-size:18 }, .class2 {font-size: 14}");
Oddly enough that works, even though page.addCssFile() does not. The disadvantage is that the css presentation is buried in the code and this is less maintainable.
By using the "nativescript-dom" plugin to gather all the views by class and defining a function to add ".classTablet" to all views containing ".class", I was able to keep all the css together in one css file for easier maintenance. I simply added the class for the larger screen size to that file and use:
if (tabletScreen) addSizeClass("welcomeButton","welcomeButtonTabletSize");
which calls the global function:
require("nativescript-dom"); // must install this nativescript plugin
addSizeClass = function(className, newSizeClassname) {
// note page is a global variable and is set in onNavigatedTo
var items = page.getElementsByClassName(className); //getElementsByClassName() is from nativescript-dom plugin
items.forEach((item) => { item.className += " " + newSizeClassname; }); //define and maintain a new size class in app.css
}
Of course, better yet might be configuring NativeScript webpack to be smarter. But I am no webpack configuration guru.
I'm trying to set a Roboto font variant in CSS - not working.
font-family: 'sans-serif-condensed'
I tried 'Roboto-Black' - not working also.
If I set the font-family to a font name that's in my /app/fonts folder - that works.
To apply font variant use either css properties like font-weight (bold, normal) and font-style (italic, normal) or provide the different font variants usually created by the authors of the fonts in separate font files.
With Roboto you have 12 different made font variants like Roboto-Bold, Roboto-THin, Roboto-Medium and others. You can use them with the file name as you mentioned in your post.
e.g.
app.css
.rb-black {
font-family: "Roboto-Black"
}
.rb-black-italic {
font-family: "Roboto-BlackItalic"
}
.rb-bold {
font-family: "Roboto-Bold"
}
.rb-medium {
font-family: "Roboto-Medium"
}
Will produce the following results:
Sample project can be found here
font-family in NativeScript supports three generic families as follows:
serif (ex. Times New Roman)
sans-serif (ex. Helvetica)
monospace (ex. Courier New)
So using sans-serif-condensed won't produce the expected results.
I can load an image stored in qrc resource at start up just fine but when I try to load the very same image (for demo purposes only), I get a 'QML Image: Cannot open: qrc:../....' error. Clicking on the image repeatedly will even give the same error to the same PNG file that was loaded at startup (with no error). It's as if the paths change once the program is up and running.Essentially, neither 'gray_button1.png' nor 'gray_button2.png' can be opened for reasons unknown once the program is running...
One other fact:the QML file running this script itself is stored/located in the QML.qrc file.
import QtQuick 2.7
Rectangle {
id: baseBtn
color: "transparent"
property string activeSource:"qrc:../Root/Images/gray_button1.png";
property string inactiveSource:"qrc:../Root/Images/gray_button2.png";
property string previousText:""
property bool active:false
onActiveChanged:{
if (active)
btnImage.source = activeSource;
else
btnImage.source = inactiveSource;
}
MouseArea{
id: mouseArea1
anchors.fill:parent
onClicked: {
active = !active;
}
Image {
id: btnImage
width:parent.width
height: parent.height
anchors.horizontalCenter: parent.horizontalCenter
source:"qrc:../Root/Images/gray_button2.png"; //opens and loads fine at start up -> appears normal
z:0
}
}
}
Here is the file structure
Application
-->Root
---->Images
gray_button1.png
gray_button2.png
-->QML
qml.qrc
button.qml
...{*.qml}
Without being able to see your full project (including the qrc XML, for instance), it's a bit difficult to be able to suggest something concrete – I can't recall a problem like this one — but I'll try.
Unfortunately, Image is a little shy when it comes to reporting what exactly went wrong. I have a fix pending for this, but it probably won't be available until Qt 5.9 (though if you have your own Qt build, feel free to try it out, it might help you!)
If you aren't able to do that, I'd suggest trying to read the paths you're passing to Image using QImageReader (in C++), and making sure that what you are reading makes sense. You should be able to more easily access an error message there through printing the errorString() of the file, something like so:
QImageReader reader("qrc:/Root/Images/gray_button2.png");
QImage img = reader.read();
if (img.isNull()) {
qWarning() << "Something is wrong:" << reader.errorString();
}
If you find no problem that way, then I'd suggest simplifying the existing code you have, for instance, using absolute rather than relative paths, like qrc:/Root/Images/Whatever.png, taking the qrc out of the equation altogether, and continuing that way, cutting one piece after another out of this until you reach something that makes sense (and works, ideally reveals the culprit).
For what it's worth, I can't reproduce the problem you mention with the example QML you're showing here.
I am writing an application in Qt, which uses QToolBar elements. In Linux and Windows, all looks OK. But in OS X, QToolBar have terrible gradient as its background. Please, suggest me, how I can remove it?
UPD.: I'm using Qt 5.2.
Have you tried QStyleSheets?
http://qt-project.org/doc/qt-5/stylesheet-examples.html#customizing-qstatusbar
http://qt-project.org/doc/qt-5/stylesheet-reference.html#background-prop
QStatusBar * bar;
bar = new QStatusBar;
bar->setStyleSheet("background: transparent;");
// bar->setStyleSheet("background: none;");
// bar->setStyleSheet("background: white;");
bar->showMessage("StatusBar");
Or if you are using it in the context of a QMainWindow, it probably would look like:
this->statusBar()->setStyleSheet( //...
Hope that helps.
The way above with QStyleSheet is correct. Another approach is to apply for example QWindowsStyle object with setStyle to QToolBar. QWindowsStyle is something that will have simple and standard look on every platform. I use it when I would like to have look&feel exactly same on all platforms despite different looks&feels on win/mac/unx.
It seems toolbar ignores styleSheets on Mac at all (at least in Qt 5.2.1). I was able to remove the gradient using the styles, for example using the Windows style. Toolbar buttons are not affected with it.
toolBar->setStyle(QStyleFactory::create("windows"));
This is a known bug also in 2020 with Qt5.12 (and probably Qt5.15). What works is setting a border (which might be zero to your stylesheet):
QToolBar {
background-color: palette(base);
border-width: 0px;
}
background-color alone does not seem to ensure that it's repainted.
After running into problems with auto-suggest stripping off leading zeroes, I took the plunge and updated my dev copy of CF to 9.0.1, including the cumulative hot-fix. Now I see a new problem.
Every one of my existing cfgrids is now displaying incorrectly in Firefox 6.0.2. The .x-panel, .x-panel-bwrap, .x-panel-body classes have a computed width of 12px, and are basically unviewable. I find that if I insert a css rule on those classes like so:
.x-panel, .x-panel-bwrap, .x-panel-body { width: 100% !important; }
the grids are again viewable. I did clear the browser cache to make sure it was importing the correct files.
IE8 and Chrome both seem to be unaffected.
OK, Peter, why not? My workaround, as posted in my question, is to add the following css rule:
.x-panel, .x-panel-bwrap, .x-panel-body { width: 100% !important; }