I'm trying to convert HTML code to JPEG image. It kinda work, but it doesn't when I try to do it with barcodes.
Server side, I'm using :
I'm encoding an EAN133 barcode with CODE128 protocol, it works when I want to show it on a web page (I use HttpUtility.HtmlEncode(code_barre) so the barcode is well interpreted), then I'm using a barcode font to display the barcode, and that's where something is wrong with my image :
As you can see, it's a barcode "plain text" in the good format, and with the following CSS:
#font-face { font-family: 'code_128regular'; src: url('/Assets/Fonts/code128-webfont.eot'); src: url('/Assets/Fonts/code128-webfont.eot?#iefix') format('embedded-opentype'), url('/Assets/Fonts/code128-webfont.woff2') format('woff2'), url('code128-webfont.woff') format('woff'), url('/Assets/Fonts/code128-webfont.ttf') format('truetype'), url('/Assets/Fonts/code128-webfont.svg#code_128regular') format('svg'); font-weight: normal; font-style: normal;} .test{font-family:'code_128regular'; font-size:70px;}
I should become this :
But it doesn't, even if I import Bootstrap CSS with relative path, whereas it works when I try to generate a PDF with IronPDF
thanks for attention
EDIT : here's the HTML generated :
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel='stylesheet' type='text/css' href='Assets/Bootstrap/css/bootstrap.min.css'>
<script type='text/javascript' src='Assets/Bootstrap/js/bootstrap.min.js'></script>
</head>
<style>
#font-face {
font-family: 'code_128regular';
src: url('/Assets/Fonts/code128-webfont.eot');
src: url('/Assets/Fonts/code128-webfont.eot?#iefix') format('embedded-opentype'), url('/Assets/Fonts/code128-webfont.woff2') format('woff2'), url('code128-webfont.woff') format('woff'), url('/Assets/Fonts/code128-webfont.ttf') format('truetype'), url('/Assets/Fonts/code128-webfont.svg#code_128regular') format('svg');
font-weight: normal;
font-style: normal;
}
.test {
font-family: 'code_128regular';
font-size: 70px;
}
</style>
<center><p class='test'>ÌMXCUTGRIP305-07DÎ</p><p>MXCUTGRIP305-07</p></center>
</html>
NReco ImageGenerator internally uses wkhtmltoimage command line tool so actually you can expect the same behavior. In your case it seems your custom font is ignored by wkhtmltoimage for some reason; first of all try to use woff, woff2 or ttf font files instead of eot. If you use "GenerateImage" method which accepts HTML as .NET string all external references should be absolute.
The following HTML template works fine for me (I've used "Libre Barcode 128" from google fonts):
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Barcode+128&lang=en" />
</head>
<style>
.test {
font-family: 'Libre Barcode 128';
font-size: 70px;
}
</style>
<center><p class='test'>ÌMXCUTGRIP305-07DÎ</p><p>MXCUTGRIP305-07</p></center>
</html>
Related
I've got a woff file named 'azonix-webfont.woff'. I added it to my website using #font-face. but it's not working. The text is displayed with the default font. Where's the error?
<head>
<meta charset="UTF-8">
<style>
#font-face
{
font-family: Azonix;
src: url(azonix-webfont.woff);
}
</style>
</head>
<body>
<p style="font-family: Azonix;">Hello!</p>
</body>
The text is displayed in default font. I don't know where's the error.
Edit: OK, I found the answer. It started working when I posted the files to the server.
You should upload your font to transfonter.org and convert. Will come css code with transfonter zip folder. And then you should change font url in css, according to place of your font files. Like this:
#font-face {
font-family: 'Proxima Nova Cn Lt';
src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot');
src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot?#iefix') format('embedded-opentype'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff2') format('woff2'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff') format('woff'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
The main problem was that the font was displayed differently than it should, although everything was connected correctly.
I managed to find the source in html and css where it is shown how to use this font and it began to appear as it should.
The only suggestion as to why the font did not work is that this font in ttf format does not work on the web.
Thank u everyone for the help!
/* #### Generated By: http://www.cufonfonts.com #### */
#font-face {
font-family: 'Voya Nui';
font-style: normal;
font-weight: normal;
src: local('Voya Nui'), url('VoyaNui_1.15_4.woff') format('woff');
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
<body>
<h1 style="font-family:'Voya Nui';font-weight:normal;font-size:65px">018.0204 BIOLOGICAL CHRONICLE</h1>
</body>
</html>
You can't do <link rel="stylesheet" href="fonts/VoyaNui_1.15_4.ttf">.
You need to use #font-face in css or style.
#font-face {
font-family: 'VoyaNui';
src: url('./fonts/VoyaNui_1.15_4') format('woff2'),
url('./fonts/VoyaNui_1.15_4') format('woff'),
url('./fonts/VoyaNui_1.15_4') format('ttf');
}
One more thing, I use woff and woff2, because it has a good compression, but be careful with some browsers (IE).
See in caniuse https://caniuse.com/#search=woff and https://caniuse.com/#search=woff2
Assuming your pasted stylesheet is styles.css, add the font-face definition before your body rule:
#font-face {
font-family: 'VoyaNui',
src: url('fonts/VoyaNui_1.15_4.ttf');
}
body {
font-family: 'VoyaNui';
}
Then remove the <link> to the font, it will not work.
You need to generate the fonts from online web font generator and after the generation of fonts put the woff and woff2 generated fonts in your fonts folder.
#font-face {
font-family: 'VoyaNui';
src: url(./fonts/VoyaNui_1.15_4) format('ttf'), url(./fonts/VoyaNui_1.15_4) format('woff'), url(./fonts/VoyaNui_1.15_4) format('woff2');
}
I am building project on MVC it's like my college project. i have uploaded template and made layout in which included all css and scrips. everything seems perfect except fonts.
<link rel="stylesheet" href="~/Content/frontend/fonts/font-awesome/css/font-awesome.css" type="text/css">
<link rel="stylesheet" href="~/Content/frontend/fonts/elegant_font/HTML_CSS/style.css" type="text/css">
<link rel="stylesheet" href="~/Content/frontend/fonts/et-line-font/style.css" type="text/css">
inside css i found this is how urls are set should i also set them like links. with ~/contnet like this.
#font-face {
font-family: 'FontAwesome';
src: url('/Content/frontend/fonts/font-awesome/fonts/fontawesome-webfont.eot#v=4.1.0');
src: url('/Content/frontend/fonts/font-awesome/fonts/fontawesome-webfont.eot##iefix&v=4.1.0') format('embedded-opentype'), url('/Content/frontend/fonts/font-awesome/fonts/fontawesome-webfont.woff#v=4.1.0') format('woff'), url('/Content/frontend/fonts/font-awesome/fonts/fontawesome-webfont.ttf#v=4.1.0') format('truetype'), url('/Content/frontend/fonts/font-awesome/fonts/fontawesome-webfont.svg#v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Here is location where fonts are.
Errors i found with fontawsome are displayed but i have gave proper location where their files are.
I am making a simple website for someone and I want to include some custom fonts in it, namely Open Sans Condensed Light/Bold.
The font does load. But not on the first load of the page. You have to click on one of the links on the page to make the custom fonts load, or have to have visited the website and done that before.
This is obviously a problem as first time visitors will be confronted with an ugly looking website. When inspecting the not-working website in firebug, the font-family css part has a greyed out name, meaning it was not activated for some reason.
I use the following code in my CSS:
#font-face {
font-family: 'OpenBold';
src: url('opensans-condbold-webfont.eot');
src: url('opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-condbold-webfont.woff2') format('woff2'),
url('opensans-condbold-webfont.woff') format('woff'),
url('opensans-condbold-webfont.ttf') format('truetype'),
url('opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSansLight';
src: url('opensans-condlight-webfont.eot');
src: url('opensans-condlight-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-condlight-webfont.woff2') format('woff2'),
url('opensans-condlight-webfont.woff') format('woff'),
url('opensans-condlight-webfont.ttf') format('truetype'),
url('opensans-condlight-webfont.svg#open_sanscondensed_light') format('svg');
font-weight: normal;
font-style: normal;
}
body, html{
font-family:"OpenSansLight";
margin:0;
padding:0;
background-image:url(../images/sintbg1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment:fixed;
}
I do include my Stylesheet. My <head> looks like
<meta charset="utf-8">
<title>Sinterklaas <? echo $titel?></title>
<base href="http://www.mywebsite.info">
<link href="css/style.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
Anyone have any idea what I can change to make this work? Maybe something I overlooked? I've been struggling with this for almost a week now.
I found the answer to my problem.
It had to do with my base href.
It used to be the href to my website. Changing it to:
<base href="http://<? echo $_SERVER['HTTP_HOST']; ?>" />
Solved my problem. Turns out the fonts only load when "www" is placed in front of the href or something.
Anyway, I hope this helps someone! I had been looking for the answer for weeks.
I know that it's possible to have multiple font-faces on css.
Now I have two html pages that use these fonts but in the future there'll be more; now those font-faces are declared via inline css and used via classes. What I really wanted was to wrap up all my font-faces into a single fonts.css and then on each individual html pages reference that css and use <p class="...-font"><p>
So my fonts' css is like this:
#font-face {
font-family: 'Komika';
src: url('/bin/res/font/KOMIKAX_-webfont.eot');
src: url('/bin/res/font/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
url('/bin/res/font/KOMIKAX_-webfont.woff') format('woff'),
url('/bin/res/font/KOMIKAX_-webfont.ttf') format('truetype'),
url('/bin/res/font/KOMIKAX_-webfont.svg#KomikaAxisRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.komika-font {font: 30px 'Komika', Tahoma, sans-serif;}
#font-face {
font-family: 'Nevis';
src: url('/bin/res/font/nevis-webfont.eot');
src: url('/bin/res/font/nevis-webfont.eot?#iefix') format('embedded-opentype'),
url('/bin/res/font/nevis-webfont.woff') format('woff'),
url('/bin/res/font/nevis-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.nevis-font {font: 500% 'Nevis', Tahoma, sans-serif;}
And the html is like this:
<head>
<link rel="stylesheet" href="/bin/res/style-fonts.css.php" type="text/css" />
<link rel="stylesheet" href="/bin/res/style.css.php" type="text/css" />
<title><?php echo $photo_title ?></title>
</head>
<body>
<h1 class="____">Some text here</h1>
<body>
And at the ____ should be "nevis-font" but the IDE (Dreamweaver) doesn't even autocomplete.
Is it possible? Because I tried it and it didn't work (the chosen font wasn't displayed).
I think I got it, the problem was that the css containing the font-faces can't end with .php like I had. I just use *.css.php because the .php forces the server to compress the css files.
Yes it's possible. We'll need more details on the problem you used to have in order to answer a more detailed answer.
The problem was that the css containing the font-faces can't end with .php like I had. I just use *.css.php because the .php forces the server to compress the css files.