I already found many answers on how to embed a font in a web page but I am asking what is the most recent and efficient one to use as some methods are very old and does not display correctly
please advise I have a commercial font I want to embed inside my web page and to be displayed in all new major browsers (we can ignore IE 6)
Thanks alot
http://www.fontsquirrel.com/ and you are set.
http://www.fontsquirrel.com/fontface/generator
Just download a kit or generate your own, open the sample page included in the kit and see how it's done.
Related
I know how to embed images in a web page inline. That's not my question.
My question is for a web page that has images included the normal way, as links to a distinct jpg file, how can I save it where it creates a single html file where the images are converted to embedded images inline in the html?
You can use SingleFile for this (I'm the author). It can be run as an extension or from the command line, more info here: https://github.com/gildas-lormeau/SingleFile.
Not a direct answer, but you may consider the MHTML format (https://en.wikipedia.org/wiki/MHTML), supported natively by IE, but also available in other browsers via plugins.
I'm using Adobe Brackets editor and I want to know how I can install common fonts such as Arial and Helvetica. I want to directly install them into my system and not just link them into my projects every time. How can I get this done?
I think you might be looking for Google Fonts. Google hosts hundreds of high-quality, free, fonts that you can use in your web project. GoogleFonts acts as a CDN, allowing your project to download the required fonts as the page is being rendered, similar to how jQuery etc operate when referenced from a CDN.
HOWEVER, you can also download and install Google's FREE, OPEN-SOURCE fonts on your local system and use them locally in your apps, including Brackets. Here is a tutorial for doing that.
How To Install Google Fonts on your Own Computer
To be complete, here are a couple of decent resources for learning how to use Google Fonts CDN-Style (not what you requested, but for future purposes):
CSS Reset - How To Use Google Fonts
W3 Schools - Use the Try It beside the font you desire
CodeCourse 3-Min Video Tutorial (if you prefer video demo)
The second reference is probably most helpful as it shows you (in their typeface) the fonts that are available, and the Try It button shows you a code example for using that font. Straight-forward and simple.
Trying to embed a pdf on my website like so:
<iframe src="filename.pdf" type='application/pdf' frameborder="0"></iframe>
The website is a rails site, and currently I'm only running it on a local server.
The problem is that the pdfs render with a toolbar on top and a sidebar with my adobe creative cloud account information, as seen in the picture below (the actual content of the pdf displays in the white box under the toolbar and to the left of the sidebar)
How can I get the pdf to render alone, without the menu and sidebar?
If you allow the browser to choose how the PDF gets rendered, you're never going to be able to create a consistent experience for your users unless you are in a controlled desktop environment.
If you are looking for a consistent experience, use pdf.js to render the PDF in the browser.
If you are in a controlled environment and all of your users have a browser/viewer combination that will let the browser show PDF using the Adobe Reader plugin (as your screen shot shows) then you can use the "open parameters" at the end of the URL to control what gets shown. See the documentation at the link below.
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
That said, don't count on that solution to work for very long. Most modern browsers are not allowing the viewer plugins to function anymore and the rest are moving in that direction.
Searching more into stack, try that:
https://stackoverflow.com/a/2105095/7741129
For more detailed informations:
http://blogs.adobe.com/pdfdevjunkie/web_designers_guide
I think it's better use some kind of JS stuff just in case of cross-browser issues, like related into first link. Solutions like https://pdfobject.com/ it's helpful to get the job done. Look:
PDFObject 2.0 detects browser support for inline/embedded PDFs. (In
case you were wondering, your browser supports embedded PDFs. You
lucky dog, you!)
If you're working with dynamic HTML, such as a single-page web app,
you may need to insert PDFs on-the-fly. However, PDF embedding is not
supported by certain browsers. If you insert markup without first
checking for PDF support, you could wind up with missing content or a
broken UI.
The PDFObject utility helps you avoid these situations by detecting
support for PDF embedding in the browser; if embedding is supported,
the PDF is embedded. If embedding is NOT supported by the browser, the
PDF will NOT be embedded.
By default, PDFObject 2.0 inserts a fallback link to the PDF when the
browser does not support inline PDFs. This ensures your users always
have access to your PDF, and is designed to help you write less code.
The fallback link can be customized, or the option can be disabled if
you prefer.
PDFObject 2.0 is npm-ready. Modern web apps use npm to manage packages
and dependencies. PDFObject 2.0 is registered with Node Package
Manager (npm) and can be loaded dynamically.
PDFObject also makes it easy to specify Adobe's proprietary "PDF Open
Parameters". (Be warned these parameters are only supported by Adobe
Reader, most PDF readers will ignore the parameters, including the
built-in PDF readers in Chrome, Internet Explorer, and Safari. Read
more below.)
Do I need anything to download to work with html5 in my computer?Or I can write it in the notepad as the usual html?
HTML5 is just another (the fifth) revision of the "usual" HTML standard. It mainly describes several new features, but still consists of plain text files and does not require any special tools on your computer.
The interesting question is whether your browser supports the new features of HTML5 (or rather: the browser of the person viewing your site), where usually none of the modern browsers (for IE that's 10+) should have serious issues.
You dont need anything to run HTML5, just a text editor and browser of your choice. And yes text editor could be Notepad++
I have a webapp which is running perfectly well in most browsers, but I'm still trying to work out a few bugs which is preventing it from working correctly in iOS Facebook's in-app browser. Until I've got these sorted, I'd like to provide a message to give users the option to open the link in Safari.
The solution I have for now is to use javascript to detect the browser's user agent (similar to this question), and if it's the Facebook in-app browser, provide a message that the webapp is optimised for Safari and give instructions to copy and paste the link into Safari.
My question is this: is there a way to make a <a> tag open in a particular browser? I have seen questions like this one which seem to point to using target="_system" for Cordova apps, but is there a method to do this with html only?
There isn't a way to do this for Safari (using just HTML, anyway). For other browsers that have custom URL schemes, you could do it. For example, for Chrome you could have your link point to googlechrome://www.website.com.
The definitive answer: No, this is not possible.
As Andrew M mentioned, some browsers have some methods that do some things similar, but a pure html method to open a link in a generic browser does not exist.