we are using wkhtmltopdf and wkhtmltoimage the latest version (0.12.3). And got a problem with the "Frutiger Neue LT W1G Bold" font. It does work on all normal browsers but after creating a image or pdf with the above mentioned libraries it renders the '0'-char wrong (it has strange roundings inside the '0').
How it should be (Chrome Version 53.0.2785.116 64-bit):
wkhtmltopdf:
wkhtmltoimage:
Maybe someone got the same problem and knows the answer?
I tested a lot of different #font-faces generated with sites like font-squirrel but nothing worked. We tried 'Gotham Medmium'-Font as well and even with that font it got some weird similar renderings.
My html/css:
<html lang="de" xmlns:og="http://ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
#font-face {
font-family: 'frutiger--test';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAA....);
font-weight: normal;
font-style: normal;
}
span {
font-family: 'frutiger--test';
font-size: 100px;
font-weight: normal;
}
.test2 {
font-size: 13px;
font-weight: normal;
}
</style>
</head>
<body>
<span>01234567890123</span>
<span class="test2">00004578</span>
</body>
It could be related to bug fixed in 0.13. So you should just update it.
You should try to use non true-type format font. If you have that font in woff2 format it should work just fine.
Related
I am trying to generate a PDF that will contain Chinese characters using dompdf and hence I downloaded the font package and added the following code in my blade.php.
#font-face {
font-family: 'simhei';
font-style: normal;
font-weight: normal;
src: url('{{base_path().'/public/fonts/'}}'simhei.ttf) format('truetype');
}
body {
font-family: 'simhei', 'DejaVu Sans', sans-serif;
}
Next, I tried the API again with Postman. The response body shows square boxes as shown below.
But if I highlighted the text, it shows the Chinese characters.
If I save the response as a file in Postman, it also shows square boxes instead of Chinese characters when I opened it in WPS Office.
I have also tried with other font packages including Firefly Sung and msyh. All give the same result.
Try this:
#font-face {
font-family: 'Firefly Sung';
font-style: normal;
font-weight: 400;
src: url(http://eclecticgeek.com/dompdf/fonts/cjk/fireflysung.ttf) format('truetype');
}
* {
font-family: Firefly Sung, DejaVu Sans, sans-serif;
}
I added a BG images to the body of a html document. after config of size and other properties, the head and list have just removed themselves. I looked at the webpage index file via web inspector, and they are physically there. just not displayed.
and ideas why this behavior would happen?
if you guys need to see the code just ask.
thanks in advance...
~Ryozaki
A couple of HTML issues...
Your <title> needs to go inside of your <head></head> tags.
You can't put <div> tags between your <head></head> tags.
You're missing a closing </head> tag
Try this:
Insert a <head> tag before your <title> tag.
Then change your <head> tag after </title> to </head>
You need to review your positioning rules
If you have an element positioned as absolute it will overlay any elements below it, unless you position the elements below to absolute as well or position them to relative with a z-index greater than 0.
But for your particular case you don't need to add absolute positioning to your image, just leave it as static and it solves your problems.
here is the your css code revised and works (per as your Fiddle):
#font-face {
font-family: 'FlexDisplay-Thin';
src: url('mywebsite/fonts/FlexDisplay-Thin');
src: local('?'), url('FlexDisplay-Thin') format('ot'), url("FlexDisplay-Thin") format('truetype'), url(FlexDisplay-Thin) format('avg');
}
h1
{
font-family: 'FlexDisplay-Thin', arial, sans-serif;
}
#bg {
position: static;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: static;
margin: auto;
min-width: 50%
min-height: 50%;
z-index:0
}
#navigation{
width: 550px;
height: 35px;
font-size; 16px;
font-family: 'FlexDisplay-Thin', arial,sans-serif;
text-align; center;
}
I have an issue with #Fontface via MyFonts for ProximaNova... Only in firefox and for some weights.
As you can see by the screenshot my fonts are not loading in firefox but have no problem in Safari and in Chrome. I've also noticed, on another page where I have multiple weights, some work, others do not. I have no altered the font face css file that was generated for me, other then adding font-weight/style to normal.
#font-face {font-family: 'ProximaNovaS-Extrabld';src: url('../webfonts/278301_2_0.eot');src: url('../webfonts/278301_2_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_2_0.woff') format('woff'),url('../webfonts/278301_2_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNovaS-Semibold';src: url('../webfonts/278301_6_0.eot');src: url('../webfonts/278301_6_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_6_0.woff') format('woff'),url('../webfonts/278301_6_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Extrabld';src: url('../webfonts/278301_F_0.eot');src: url('../webfonts/278301_F_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_F_0.woff') format('woff'),url('../webfonts/278301_F_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Regular';src: url('../webfonts/278301_13_0.eot');src: url('../webfonts/278301_13_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_13_0.woff') format('woff'),url('../webfonts/278301_13_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Bold';src: url('../webfonts/278301_14_0.eot');src: url('../webfonts/278301_14_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_14_0.woff') format('woff'),url('../webfonts/278301_14_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNovaS-Bold';src: url('../webfonts/278301_7_0.eot');src: url('../webfonts/278301_7_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_7_0.woff') format('woff'),url('../webfonts/278301_7_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Semibold';src: url('../webfonts/278301_12_0.eot');src: url('../webfonts/278301_12_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_12_0.woff') format('woff'),url('../webfonts/278301_12_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
Here is a sample of the bigger text style
h1 { color: #ff6500; display: inline; font-family: 'ProximaNova-Semibold'; font-size: 34pt; letter-spacing: 1px; line-height: 42pt; text-align: left; text-transform: uppercase; }
I've tried to do some tests... as far as putting the same markup and style of working weights (in firefox) in the the same page as shown in the screen shot, which then doesn't work. So I'm stumped.
Thank you for your help.
---------- Update -----------
It seems for the most part Firefox is displaying the fonts correctly. However as you can see in the top window (firefox) the text different from the the bottom (Safari) This is really stumping me... http://postimg.org/image/vftkepyw1/
Font files do not exist at the specified path.
I believe you where just not linking to the specified font.
The above link http://www.chezvalois.com/test/index.html is now showing all proxima nova fonts in my Firefox.
I believe this is now fixed.
I have been hacking and digging the google + stackoverflow, hope to find relevant solution that relate to my problem below but could not find one:
I am using bootstrap (twitter) ver 2.0 and encountered that the image resize doesn't work on IE8 but work on other browsers.
The original code for image resize is:
<img src="alpha1-stamp.png" width="70" height="70">
It rendered so well in browser such as Safari, Firefox and Google Chrome but not IE8 (the only version i have on another desktop but reckon it should not work on all IE version)
Please advice and desperate need to fix this IE nightmare
Cheers
Alright, finally got it sorted and found the way to hack the boostrap.css file
Just comment the following on bootstrap.css (bootstrap framework)
/*
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
} */
Just comment the following on bootstrap.css (bootstrap framework)
img {
width: auto\9;
height: auto;
/* max-width: 100%;*/
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
I had problem with Internet Explorer < 8 not respecting width & height attributes of my img tags and was able to solve it removing only the height:auto rules of the img selector.
(removing max-width didn't help)
If removing of some code from bootstrap css didn't help you can try this => https://stackoverflow.com/a/17763577/789012
As for me after removing of it my layout in Chrome was broken the same way as in Mozilla or IE...
The promblem is the
width: auto\9;
height: auto;
If you comment this line it works correctly on IE
I solved it differently by hacking conditional override styles in the HTML.
I already had an IE8 workaround section below the bootstrap stylesheet, so I add resets for the problem images:
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<style type="text/css">
img, img.img-responsive {
width:auto;
height:auto;
max-width: none;
}
</style>
<![endif]-->
<style type="text/css">
I've got a crush on a certain font named "Kimberly" and I'm trying to use it on a heading / motto of a website.
Applying the #font-face css rule worked for all browsers except IE7 where the heading isn't displayed at all, not even with a fallback font.
And what's most annyoing is that other page [ an example page downloaded from fontsquirrel.com after the conversion of the .ttf font into .eot ] works perfectly on all browsers versions.
Have anyone been through something similar?
Please, take a look.
Thanks
Try adding zoom: 1 to the elements that are using your custom font. So for example:
#motto {
position: relative;
top: 20px;
color: #000;
font-family: "kimberleyregular", Arial, sans-serif;
font-style: normal;
font-weight: normal;
zoom: 1;
}