The Verdana font in Microsoft Word appears with a distinct rendering when converted to an HTML-based

I'm currently working on generating a PDF from an HTML template. Our customer provided the template they previously used in Word, and they require the font to be Verdana. The challenge I'm facing is that Verdana looks smaller and has a different weight when applied using CSS compared to how it appears in Word. I've attempted to make the CSS version resemble the Word document by:

  1. increasing the font-weight - but CSS only supports 400 (normal) or 700 (bold), which doesn't give me the desired in-between weight.
  2. adding text-shadow - I managed to achieve a similar look in the HTML template using text-shadow: 0.1px 0 black;, but this styling was ignored when rendering the PDF. Only fixed pixel sizes like text-shadow: 1px 0 black; were taken into account, resulting in a bolder effect than intended.

Do you have any suggestions on how I could resolve this issue? Verdana is crucial as it's the customer's signature font and a non-negotiable requirement.

Just to note, for PDF rendering I am utilizing the .Net core version of SelectPDF.

Thank you,

Lorena

htmlcssasp.net-corefontsselectpdf

Answer №1

Typically, web browsers and PDFs utilize separate layout and font engines, resulting in differences in how content is displayed. One potential solution is adjusting the DPI settings of your PDF to ensure it matches the resolution of your monitor.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the implementation of a many-to-many relationship on a webpage

In the process of creating a library database and dealing with a many-to-many relationship between books and writers, I am contemplating how best to design the user interface for managing this information. When editing a book entry, selecting one or more ...

htmldatabaseuser-interfacemany-to-many

Empty Firebase currentUser Redirected After Successful Sign In

I have a webpage named index.html which serves as the sign-in page. After a user successfully signs in, I want to redirect them to a new page called home.html, where their email will be displayed. However, I am encountering an issue with getting a null va ...

phphtmlfirebasefirebase-authentication

Load an external script once the page has finished loading by leveraging the power of $(document).ready() in conjunction with $.getScript()

Is it possible to load a script in the header of a website instead of at the bottom? I've been trying but it's not working as expected. Here is an example of what I'm attempting: HTML file: <!DOCTYPE html> <html lang="en"> < ...

javascriptjqueryhtmlexternal

What is the best way to develop an expanding line animation from this starting point?

I have a vision for an animation where, upon hovering over an icon, it enlarges, increases in opacity, and reveals some accompanying text. The visual effect I am aiming for involves two lines of color expanding horizontally from the center outwards before ...

htmlcssanimationcss-animations

Steps for incorporating HTML templates into a Next.js 13 project

Looking for advice on converting an HTML template using Bootstrap or Tailwind CSS into a Next.js 13.4 project. I have experience with Next.js 12 but understand that the project structure has changed, removing files like _app.js and _document.js. Any tips o ...

htmlreactjsnext.jslayoutnext.js13

Choose only the values that start with a letter in the autocomplete list

I am currently utilizing the datalist feature for my autocomplete field. Everything is functioning properly. In my list, I have the values james, reeta, and mary. For example, if I type in "r" in the autocomplete box, it shows both reeta and mary because ...

html

What exactly does Apple consider as a "user action"?

In the midst of my current web project, I am facing a challenge with initiating video playback after a swipe event. Despite utilizing the HTML5 video player and JavaScript to detect swipes, I have encountered difficulties in achieving this functionality. I ...

javascriptioshtmlvideo

Having Trouble with $.ajax Function in my Program

After spending three days experimenting with various methods, I'm still unable to successfully use the Javascript ajax command to send form values to a php script. Despite no errors being displayed and the scripts running smoothly, nothing is getting ...

javascriptphpjqueryhtmlajax

Activate Popover with Hover and simply click anywhere to dismiss

Currently utilizing Bootstrap 4 and intrigued by the popover feature that activates on hover and closes when clicked anywhere. I'm also interested in making links functional within the popover. Any suggestions or tips on how to achieve this? $(doc ...

javascriptjqueryhtmlbootstrap-4popover

Icons will be displayed when hovered over

Is it possible to display icons on hover in a div and hide them otherwise using just CSS? Or do I need to use javascript for this function? Thanks in advance! Example: HTML: <div id="text_entry"> <p>Some text here</p> <span ...

jqueryhtmlcss

Superimpose two actionlinks and prioritize the one appearing above

I have implemented a menu similar to http://tympanus.net/Tutorials/SlideDownBoxMenu/. Below this menu, I have placed a webgrid. The issue I am facing is that when I hover over the menu, the slidedownbox with two action links pops up directly over the heade ...

jqueryhtmlcssasp.net-mvc-4

Access Information within live tabs

When attempting to click on any tabs in order to retrieve their respective data, I am successfully able to do so. However, I'm only able to retrieve the data of one row at a time. Can anyone provide assistance with this issue? <div class="col-lg-1 ...

phphtmltwitter-bootstraplaravel

Obtain the URL link from Unsplash where the picture is sourced

As I work on a website, I incorporate a link () to display a random photo. However, the photo refreshes periodically and upon loading the site, all that is visible is this default link: . Is there a method to extract the actual source like so: "". Althou ...

javascripthtmlcss

Leveraging BeautifulSoup for extracting information from HTML documents

I'm working on a project to calculate the distance between Voyager 1 and Earth. NASA has detailed information available on their website at this link: ... I've been struggling to access the data within the specified div element. Here's the c ...

htmlpython-2.7

To ensure proper functionality, make sure that Python Selenium's Geckodriver is correctly

I want to automate form filling using Selenium. Below is the HTML code for the form: <!DOCTYPE html> <html> <body> <h2>Text input fields</h2> <form> <label for="fname">First name:</label><br& ...

pythonhtmlseleniumwebautomation

What is the proper usage of main.js and main.css within the skeleton portlet project that is created by the Liferay 6.0.6 plugin SDK?

Is it a good practice to include portlet-specific JS or CSS in them only if <portlet:namespace /> works within them? Should I rely on unique function/variable names or class names instead? ...

javascriptcssliferayliferay-6

Expand the clickable area of the checkbox

Is it possible to make clicking on an empty space inside a table column (td) with checkboxes in it check or uncheck the checkbox? I am limited to using only that specific td, and cannot set event handlers to the surrounding tr or other tds. The functional ...

javascriptjqueryhtml

Adjusting the width of Bootstrap 4 form validation messages for improved layout

Having some issues with Bootstrap 4 form validation and jquery. When the validation message is displayed, it strangely affects the width of the entire form. Check out my HTML: <div class="container l-login-container"> <main class="l-mainConten ...

jqueryhtmlformsvalidationbootstrap-4

Tips for adding animation to the div instead of the content

I have implemented a hover animation to animate the div, but unfortunately, when I added the animation to #i :hover {}, it ended up animating the words only. Moreover, the cursor transforms into a pointer solely when hovering over the words instead of the ...

htmlcsscss-animations

Conceal the URL and any parameters upon successful completion of AJAX request

In my ajax js code, the solonreport.jsp file returns a URL link that connects to a local report server and generates an Excel report. However, when using this link with the window.open(json.url) function, the link and parameters are visible to the user. ...

javascriptjqueryhtmlajax