I am adding a custom font in my project when I am adding this font using normal CSS that time it's working but when I am using this font in SCSS processor CSS that time it's not working.
I am sharing the screen shot of file and console error.
I do not find where I am doing wrong. Please resolve my problem.
The message is pretty much self-explanatory. The issue is you are using = instead of a : to assign the value to the variable. It should be
$roboto-Regular: 'robotoregular';
Don't be so specific with the variable names, variables are meant to hold dynamic data. If tomorrow, you change the font to some other font, using roboto-Regular as the variable name would make no sense. You should use something like
$base-font: 'robotoregular';
$fallback-font: 'Arial';
font-family: $base-font, $fallback-font;
Related
In SCSS, is there a way to output only styles that use certain variables?
I have color variables all in one file, but they are used all over the stylesheet. Now I want to add a different color theme without duplicating all the styles unrelated to color, is that possible?
It's not that easy (and quite error prone) to determine usage of certain variables for output. You could check if they are defined using #if($x) but that might not be what you're looking for.
But I don't think I fully understand what you're trying to achieve...
Is it:
white labeling your app/site (so 'overriding' the original values with new values)?
Having two separate 'themes' exist on their own (unique variables) but avoiding conflicts that might happen due to overlapping styles?
For:
Redefine the variables, given this line: $x = 1; $x = 2; z-index:$x; the z-index will be 2. So something like: #import 'base-theme'; #import 'client-theme' would override every existing variable with the value from client-theme which would mean zero rewrites of existing styles (and only one extra file with the new theme).
You will need to add logic for this, so rewriting styles will be a likely outcome. something like #if($hotpink) { color:$hotpink } #else { color:$original-pink} should work for those, but it will be cumbersome and quite hard to maintain.
My recommendation (for most use-cases): Go with option #1, it will save you a lot of work and debugging.
Hope that helps, feel free to ask if this seems unclear.
So I'm trying to use a custom font "Impact". It works fine if the font is installed on the computer, but if it's not I can't seem to get it to work. I bring in the .ttf file to the project, add it to the info.plist like this:
Impact.ttf
And I've tried multiple methods for using that font on a SKLabel but nothing works. Here's what I've tried:
let restartLabel: SKLabelNode = SKLabelNode(fontNamed: "Impact-Regular")
let restartLabel: SKLabelNode = SKLabelNode(fontNamed: "Impact")
let restartLabel: SKLabelNode = SKLabelNode(fontNamed: "Impact.ttf")
Any ideas? I would really appreciate the help, thanks!
You need to use the exact same name of your font. So if you want to use the Impact Regular font, you need to call it like that:
SKLabelNode(fontNamed: "Impact Regular")
Without the -.
The correct answer is here Custom font in a Cocoa application
It turns out that the app didn't know where to look for the font, but setting the Application fonts resource path in info.plist made it work. I actually left the value blank since the font in just in MyApp.app/Contents/Resources/
I recently started using bootstrap SCSS on my node project. So I have app/bower_components/bootstrap-sass/lib/_glyphicons.scss for example.
Looking at my CSS output I see things like:
#media -sass-debug-info{filename{font-family:file\:\/\/\/home\/some\/path\/project\/app\/bower_components\/bootstrap-sass\/lib\/_normalize\.scss}line{font-family:\0000332}}
audio,
canvas,
video {
display: inline-block;
}
I have 2 questions:
This seems like a security hole. Everyone can deduce something about my OS and directory structure simply by looking at my CSS. What is the correct way to close this security hole?
How does it work? I nearly got it figured out, but I am missing something. Looking at the SCSS, I see bootstrap is using $icon-font-path which apparently turns into this absolute path. Looking at compass documentation, I see they provide absolute values but no $icon-font-path
This is the piece of code I am referring to:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('#{$icon-font-path}#{$icon-font-name}.eot');
src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
}
Both answers are correct. To sum it up, there's no magic.
Bootstrap initializes $icon-font-path with a default value.
if you include bootstrap's SCSS in a manager that requires a different value for $icon-font-path you should also override their default value.
The syntax $icon-font-path: some_value !default; means - use this value if not already set.
So when you include you should do the following
/* override icon-font-path value and include scss */
$icon-font-path: bower_components/bootstrap/fonts;
#include bower_components/bootstrap/bootstrap.scss;
paths might be different in real scenarios.
This seems to be a standard mechanism for publishing a reusable SCSS modules.
Here is the variables file where they set the $icon-font-path variable.
It looks like $icon-font-path is set to the foldername of the font files. not necessarily a security hole because its a relative path to the fonts.
The -sass-debug-info mess is rudimentary "source mapping", so browser developer tools can show you the original line number and filename of the Sass rule that generated that CSS (instead of the line number for the generated CSS).
Firebug has a FireSass plugin that understands these annotations. I think Chrome has built-in support, but it might be behind an experimental flag.
It has nothing to do with fonts; font-family is just used because it's an easy way to shove a string into CSS in a way that's still accessible to JavaScript without actually affecting the rendering of the document. It also has nothing to do with Bootstrap; this is part of the scss compiler.
It won't be there in compressed output, which I hope you're using in production. :)
#guy mograbi: In Bootstrap-SASS-3.3.6, $icon-font-path in /bootstrap/bootstrap/_variables.scss #83 is declared like this:
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
Since $bootstrap-sass-asset-helper is not defined yet, it may be useful to include the _variables.scss before overwriting the $icon-include-path, so we can read the "settings" and overwrite the $icon-font-path together with the if() cases.
We can use something like:
#include bower_components/bootstrap/bootstrap/_variables.scss;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "/fonts/bootstrap/");
#include bower_components/bootstrap/bootstrap.scss;
I made a bitmap font using Hiero, called default.fnt and default.png. I can use these as a BitmapFont in LibGDX, and draw text with the font without problems, using font.draw(). But I can't use this font as the default font in a Skin. I've used the uiskin.json file from here(along with the rest of the skin, but I deleted the Droid Sans files before making my own font), because I have no idea how to make one of my own. From what I've read on the Internet, the .json file is correctly set up: it has the line com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } }, which should make the default.fnt the default font for widgets that use the skin. Still, when I run the program, I see this:
There should be a label above the buttons, and the buttons should have text.
If I do this: startGameButton.getStyle().font = font;, where startGameButton is one of the buttons, and font is the BitmapFont created like this: font = new BitmapFont(Gdx.files.internal("uiskin/default.fnt"), Gdx.files.internal("uiskin/default.png"), false);, the buttons shows the text properly. I don't want to do this since it feels too much like a hack.
I'm following this tutorial, but I've had to look some things up in later revisions of his code, because LibGDX has changed since it was written.
MenuScreen.java(the screen where there are problems)
AbstractScreen.java
Also please tell me if there's a better way to make the menu UI, or if you need other files. The uiskin.json is linked above.
Thank you.
I fixed it. The Droid Sans bitmap image existed in two places, it was part of uiskin.png too. I don't know how, but it probably read the font's letters from that file instead of default.png. So in the end I just renamed the font's .fnt and .png(and the file parameter in the .fnt) and did a search-replace inside the skin's .json, and it all works fine now. I don't know exactly what caused it, but maybe default-font is a reserved word or something.
Anyway, it works now. Thanks to Jyro117 for making me think maybe I shouldn't replace the default but add my own font.
I've been looking for a solution for this for a while now and the only fixes I found only affect the way the text is displayed in the editor itself and not how the generated text will look when sent/saved somewhere else. I'm talking CSS fixes and stuff like that.
I'm using CKEditor to compose and send emails trough our web application and while the css fixes change the font shown in the editor itself, the recieved emails are still displayed in TNR or whatever is inherited from the email client. Unless, of course, I change the font and size from the plugin for each paragraph.
From what I've noticed whenever you set the font and size from within the plugin, CKEditor creates a span (well, actually two, one with the font and one with the size) with the newly changed style (for example <span style="font: Arial"><span style="font-size: 12"></span></span>) and I figure I could just wrap the whole result in a span or div with my desired font and size styling, but that might interfere the users' templates and styles.
Is there any way to set the default text styles (as seen by the recipient of the emails) from the plugin itself or will I have to come up with a hack to it.
This is the only way I have found to force ck editor to create a default font. IE it wraps entered text in a (default) font span even if no font has been selected, and therefore will output formatted text. If you want the changes to be universal, add the following to config.js. Otherwise, it should be possible to add it to just one instance as well. Though I haven't tried that.
config.font_defaultLabel = 'Arial';
This will make the drop down default to 'Arial'. Though even this doesn't work the way I would hope. First, the editor must be activated (not just loaded) for the drop down to default. Then unlike a manual selection the value is not highlighted in the drop down box. It just displays.
Then add this below your default configuration options:
CKEDITOR.on( 'instanceReady', function( ev ) {
ev.editor.setData('<span style="font-family:Arial, Verdana, sans-serif;"></span>');
});
This will pre-populate the text area with the span you need. However you must include some character(s) in the span tag to force this 'hack' to work. So you're going to be stuck with something in your output you don't really want.The original version of this I found somewhere on the web used:
Which seems relatively innocuous.
I have looked and looked for a better way (and would love if someone knew one). Most people simply say capture the output and reformat it. That really wasn't an option for me. It may also be possible to accomplish this with a custom plugin. That too wasn't really viable for me.
Hope this helps someone save some time at least.
P.S. The original came from the support board at CK editor. Here is the link: forum
If you want to change style of text outside editor, then you have to style it... outside editor :). AFAIK in email stylesheets can't be used, so the thing that left you is wrapping with div having inline styles.
To have the same result in CKEditor you should edit contents.css and set the same styles for body as for div wrapper.
Next step would be to remove format combo from toolbar, because it's based on markup. For emails it'll be better to use styles combo, because you can define inline styles, tags and attributes that are applied with each style. Check styles.js.
Add this into your config.js File
CKEDITOR.config.font_defaultLabel = 'Arial';
CKEDITOR.config.fontSize_defaultLabel = '20';
Then it will be changed when your CKEditor was triggered.