Fall-back fonts for JavaScript context.font - javascript

Is there any way I can have multiple fall-back fonts for JavaScript context.font?
a fall-back font is a font that the browser
'falls back' to if the current one isn't supported
For example:
ctx.font = '20px arial'
ctx.fillText('Hello World!', 100, 100)
Let's say that arial wasn't supported. How would I make the computer fall back to tahoma and then verdana?
I kind of understand how CSS works: font-family: arial, tahoma, verdana
... But does context.font do the same thing as CSS?
Can I just write this: ctx.font = '20px arial, tahoma, verdana'? Or do I need to do something else for it to work?

Related

make text double bold - scaled sheets

Is there any way to increase the intensity of the bold-ness of apply it twice?
I am using this styling on my text:
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
},
Is it possible to make it double/more bold without increasing the font size?
You can slightly adjust the thickness by setting numerical values at the property fontWeight.
Besides bold the property fontWeight can also handle numerical values, such as 100 for very thin and 900 for very thick.
As far as I know, fontWeight: 'bold' has the numerical value fontWeight: '700'.
So:
fontWeight: '900' should be slightly thicker than fontWeight: 'bold'
Well, it's not the "double" what you actually ask for, but maybe this helps you a bit.
Source: https://www.w3schools.com/cssref/pr_font_weight.asp
If you want to have a text "bolder" than fontWeight: '900' you will have to use "visual cheats", e. g. another font-family or text-shadow.
Here is some sample:
<div style="font-weight:900;">I am the highest font-weight value 900</div>
<div class="doublethick">But I am even thicker :)</div>
<style>
.doublethick {
color:#000000;
text-shadow: 0.5px 0 #000000;
letter-spacing:1px;
font-weight:bold;
}
</style>
you can use text shadow property like this
<h1 style="text-shadow: 2px 0px 1px #000;">This is h1 tag</h1>
For making a number double bold you can use this code
numbers: {
font-size: 30;
color: hex;
font-weight: 800;
}
I think it will work.

Font are wrong or inconsistent in Kendo PDF

I am having a problem with KendoUI PDF export. I believe the core "Regular" font loads, but the varients don't seem to be there. am I configuring "bold\semibold\etc" wrong?? The docs are REALLY bad explaining this.
As an example "Work Sans" with font-weight: 700; doesn't show up in the pdf, looks just like regular. Clearly it's Work Sans, but nothing is bold.
Simple VSCode Project Sample:
https://www.dropbox.com/s/w25q38w1makog3w/FontProject.zip?dl=0
So here are my font families from the sass
$font-Halant: 'Halant', serif;
$font-IBMPlexSerif: 'IBM Plex Serif', serif;
$font-Lato: 'Lato', sans-serif;
$font-Roboto: 'Roboto', sans-serif;
$font-SourceSansPro: 'Source Sans Pro', sans-serif;
$font-WorkSans: 'Work Sans', sans-serif;
They are all google fonts for the page and the ttfs are saved locally for the kendo export. Everything looks great on the page, all the fonts are there.
This is how I am defining the fonts for export
kendo.pdf.defineFont({
//Halant
"Halant": "fonts/Halant/Halant-Regular.ttf",
"Halant|SemiBold": "fonts/Halant/Halant-SemiBold.ttf",
"Halant|Bold": "fonts/Halant/Halant-Bold.ttf",
"Halant|Medium": "fonts/Halant/Halant-Medium.ttf",
//Roboto
"Roboto": "fonts/Roboto/Roboto-Regular.ttf",
"Roboto|Bold": "fonts/Roboto/Roboto-Bold.ttf",
"Roboto|Medium": "fonts/Roboto/Roboto-Medium.ttf",
//IBM
"IBM Plex Serif": "fonts/IBM_Plex_Serif/IBMPlexSerif-Regular.ttf",
"IBM Plex Serif|Bold": "fonts/IBM_Plex_Serif/IBMPlexSerif-Bold.ttf",
"IBM Plex Serif|Medium": "fonts/IBM_Plex_Serif/IBMPlexSerif-Medium.ttf",
"IBM Plex Serif|SemiBold": "fonts/IBM_Plex_Serif/IBMPlexSerif-SemiBold.ttf",
//Lato
"Lato": "fonts/Lato/Lato-Regular.ttf",
"Lato|Bold": "fonts/Lato/Lato-Bold.ttf",
//Source Sans Pro
"Source Sans Pro": "fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf",
"Source Sans Pro|Bold": "fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf",
"Source Sans Pro|SemiBold": "fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf",
//Work Sans
"Work Sans": "fonts/Work_Sans/WorkSans-Regular.ttf",
"Work Sans|Bold": "fonts/Work_Sans/WorkSans-Bold.ttf",
"Work Sans|Medium": "fonts/Work_Sans/WorkSans-Medium.ttf",
"Work Sans|SemiBold": "fonts/Work_Sans/WorkSans-SemiBold.ttf"
});
Post was answered by Telerik, gonna post this for others. Basically just make new font names, specify the files and it should be good.
Now I still WANT google fonts for the page so on PDF export I apply a .exporting class to body so I'll just hack these font names in for that.
1) Remove the googlefonts link from the index :
<head>
<!-- Fonts -->
<!-- <link href="https://fonts.googleapis.com/css?family=Halant:400,600|IBM+Plex+Serif:400,400i,600,600i,700|Lato|Roboto:400,500,700|Source+Sans+Pro:400,600,700|Work+Sans:400,500,600" rel="stylesheet"> -->
</head>
2) Remove the kendo.pdf.defineFont method from resumes.js:
kendo.pdf.defineFont({...})
3) Use font-face in the resume.css files to load the desired fonts from the local files:
#font-face {
font-family: "Work Sans";
src: url("fonts/Work_Sans/WorkSans-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Work Sans Bold";
src: url("fonts/Work_Sans/WorkSans-Bold.ttf") format("truetype");
}
Notice that the declaration is slightly different for the Bold file. This allows the usage of the font to be changed in the resume.css as follows:
.resume.style2 {
font-family: "Work Sans";
}
.resume.style2 header h3 {
font-size: 16pt;
font-family: "Work Sans Bold";
}
.resume.style2 section h4 {
line-height: 23px;
font-size: 12pt;
letter-spacing: 0.1pt;
font-family: "Work Sans Bold";
}

Custom font on canvas only working for safari

I'm currently building a canvas game in JavaScript and jQuery. For the statusbar I wanted to use a custom font, named "pixelart.ttf". In index.html I added the following:
<style type="text/css">
#font-face {
font-family: pixelart;
src: url(misc/pixelart.ttf);
}
</style>
It is before all scripts are loaded. The canvas is also on this page.
This is the code that should draw the statusbar with the font:
context.fillStyle = 'rgba(25, 25, 25, 0.1)';
context.textBaseline = 'top';
context.font = fontSize + ' ' + fontName; // will become '25px pixelart'
context.fillText(currentText, 50, 50);
In Safari on both Mac and iPhone the font works, on all other browsers it does not.
When I look at the loaded resources in Chrome or Firefox the font is there, but it shows another default font.
I tried some things. For example adding this at the top of the body:
<div style"font-family: pixelart"></div>
But this also doesn't work.
Any suggestions?
In addition to .ttf you need to have your font in .eot .woff2 .woff to make it work.
css example:
#font-face {
font-family: 'yourFONT';
src: url(/yourFont.eot');
src: url('/yourFont.eot?#iefix') format('embedded-opentype'),
url('/yourFont.woff2') format('woff2'),
url('/yourFont.woff') format('woff'),
url('/yourFont.ttf') format('truetype'),
url('/yourFont.svg#yourFONT') format('svg');
font-weight: normal;
font-style: normal;
}

How can I add my own CSS styles to CKEditor

There is already a post dealing with this however, everything that was suggested has been tried and still nothing works this is what I have so far:
In the config.js file
CKEDITOR.editorConfig = function(config)
{
config.defaultLanguage = 'en';
config.language = 'en';
config.resize_dir = 'vertical';
config.format_tags = 'p;h1;h2;h3;h4;h5;h6';
config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/fileName.css';
config.stylesSet = [];
};
then in the css file mentioned above is some styling for the h1, h2, h3 etc..looks something like this:
h1 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #5B5B5B;
}
h2 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #FF4040;
}
h3 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #60bf00;
}
the issue is that this is not changing the h1, h2, h3 etc.. tags, any ideas on how I can get this to work would be greatly appreciated.
I have a wrapper function that I use to init the RTE. Try doing something along these lines, which is similar to what #MiniRagnarok posted.
I just ran a test and it changes the CSS in both the editor's format and the inside the editor's contents. Be aware that you would need to reference the stylesheet on the page that the content is being display on or you won't see the updated styles.
function rteInit(inputId, height) {
var editor = CKEDITOR.replace(inputId,
{
contentsCss: '/admin/css/ckeditor.css',
height: height,
toolbar: [ <!-- Toolbar options --> ]
});
}
Try forcing overriding with !important. Eg:
font-size: 36px !important;
You could always go to ckeditor/contents.css and make all of your changes in that file. Those changes will be reflected in the editor.
Adding your own file is done by setting the config.
config.contentsCss = '/css/mysitestyles.css';
config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];

How to use the "Helvetica Neue Bold Condensed" in the HTML5 Canvas

So the question is, how can I use "Helvetica Neue Bold Condensed" in the HTML5 Canvas.
I've tried:
context.font = "20pt 'HelveticaNeue-BoldCondensed'";
context.font = "20pt 'HelveticaNeue-CondensedBold'";
context.font = "20pt 'Helvetica Neue Bold Condensed'";
none of them work.
There's a couple of different things that could be wrong:
Are you including the web-font (if you aren't assuming it's on your own computer)? You can double-check this by setting the font-family to another, plain HTML element and see it if works.
Do you have the proper files in the correct format for your browser/version?
You're not calling it by it's "actual" font family name. Sometimes these can be bizarre, so you may need to check with a font viewer or an online service.
Ol' man Miedinger is haunting you because you're stealing his greatest work.
I would encourage you not to use fonts that you do not have a legal license to use as web fonts. :) Google and other vendors have a lot of good, free stuff out there. Use that.
It apparently doesn't matter if you omit the font-weight or font-style, although you need to make sure and match the font-weight and font-styles in your #font-face definition(s).
However, bizarrely you can end up with some strange results:
context.font = '40px Griffy';
context.fillText("StackOverflow", 20, 50);
context.fill();
context.font = 'normal Rye';
context.fillText("StackOverflow", 20, 100);
context.fill();
http://jsfiddle.net/userdude/tceh5/1/
You would think it still had enough to work with, but this gives:
Leading me to believe you need to be careful and probably be as descriptive as possible. It can apparently use 40pt Rye, while normal Griffy just gets ignored for the default 10px Sans-Serif.
HTML
<canvas id="mycanvas" width="400" height="300"></canvas>​
CSS
#font-face {
font-family: 'Griffy';
font-style: normal;
font-weight: 400;
src: local('Griffy'),
local('Griffy-Regular'),
url(http://themes.googleusercontent.com/static/fonts/griffy/v1/f4FUXlL5FPqftKJ2T0mqXg.woff) format('woff');
}
#font-face {
font-family: 'Rye';
font-style: normal;
font-weight: 400;
src: local('Rye Regular'),
local('Rye-Regular'),
url(http://themes.googleusercontent.com/static/fonts/rye/v1/o1b_1mvE63vyDpMCbEPL_A.woff) format('woff');
}
#font-face {
font-family: 'Jolly Lodger';
font-style: normal;
font-weight: 400;
src: local('Jolly Lodger'),
local('JollyLodger'),
url(http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}​
Javascript
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.font = 'normal 40px Griffy';
context.fillText("StackOverflow", 20, 50);
context.fill();
context.font = 'normal 40px Rye';
context.fillText("StackOverflow", 20, 100);
context.fill();
context.font = 'normal 40px "Jolly Lodger"';
context.fillText("StackOverflow", 20, 150);
context.fill();​
http://jsfiddle.net/userdude/tceh5/

Categories

Resources